0

我有一个搜索页面，它从表单中获取用户输入，然后将该信息发送到 PHP 文件，该文件将 cURL 调用发送到外部服务器。然后，PHP 文件从服务器获取返回的数组，并将一些 HTML 回显到原始搜索页面中的“结果”div。

我想做的是设置它，以便当用户单击“结果”div 中的一个行项目时，会出现一个模式窗口，其中包含有关单击的单个项目的更多信息。

我知道如何创建一个 jQuery 脚本，该脚本将处理对单个唯一链接的单击，并通过再次查询服务器来生成模式窗口（通过一个单独的 PHP 文件，该文件使用附加信息格式化模式框并正确调整大小）。我不知道如何使用动态创建的内容来处理所有这些。

这是第一个 PHP 文件的回显：

[在编辑时删除；见下文]

它对服务器返回的数组中的每个“列表”执行此操作。

这是我在单击#modalLaunch div 中的锚标记时创建模态窗口的想法（这来自我一直用来弄清楚如何操作模态窗口及其内容的测试页面）：

[在编辑时删除，见下文]

我开始怀疑我需要完全放弃这种方法并尝试使用“onClick”策略，但我不知道如何在所有函数之间传递相关信息。帮助！

编辑：

问这个问题我做得非常糟糕。对不起。这是我正在使用的代码的更好表示：

PHP 文件：

（$data 是从外部服务器提取的数组。我已经删除了一堆无关变量，所以假设它们映射到一些合理的东西。）

$data = unserialize($data);

$listings = $data["listings"];

echo "<ul id='listings_grid'>";

for($i=0;$i<$data["count"];$i++)
{
    $url = "/listings/".$listing_id;

    echo "<li>
            <a href='' target='_blank' data-listing-id='".$listing_id."'>
                    <div class='listing_thumb_image_container'>
                        <img class='listing_thumb_image' src='".$mainPhoto."'/>
                    </div>
                    <div class='listing_thumb_content'>
                        <br>Rent: $".$rent."
                        <br>Bedrooms: ".($bedrooms_count==0 ? "Studio" : ($bedrooms_count=='0.5' ? "Convertible" : $bedrooms_count))."
                        <br>Listing ID: ".$listing_id."
                    </div>
            </a>
        </li>";

}

echo "</ul>";

搜索页面：

（再次，抽出很多多余的东西。）

<?php
<script>

$(document).ready(function(){
$.post($("#html-form").attr("action"),$("#html-form").serialize(),function(data){
    $("#search_results").html(data);
});
});

$(document).ready(function(){
$("#html-form").on('change submit',function(){
    $.post($("#html-form").attr("action"),$("#html-form").serialize(),function(data){
        $("#search_results").html(data);
    });
    return false;
});
});

$(document).on('click','#search_results li',function(){
$('.modalDialog').css('display','block','opacity','1','pointer-events','auto');
var href = $(this).children('a').attr('href');
$('#openModalContent').load(href);
return false;
});

</script>

<div id="openModal" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <div id="openModalContent"></div>
</div>

</div>

<div id="content">

<div id="search_form"><form></form></div>
<div id="search_results" style="margin:0 auto;"></div> 

</div>

<?php include ('footer.php'); ?>

那么我从这里去哪里呢？出于某种原因，当我插入到目前为止答案提供的选项时，我没有看到模式框出现。它可能与 CSS 有关：目前，模态窗口只有在受到 :target 伪类时才会变得不透明。建议？

4

2 回答 2

1

如果您希望动态生成的内容能够执行此操作，如果您使用 JQuery 1.9 及更高版本，请尝试以下操作： 

$(document).on('click','#openModalContent li',function(){
    var href = $(this).children('a').attr('href');
    $('#yourModalBox').load(href).show(888);
    return false;
});
于 2013-04-03T17:20:47.790 回答
0

将 data-listing-id 属性添加到生成的 HTML 中的锚点：

<a href='".$url."' target='_blank' data-listing-id='".$listing_id."'>

并在您的点击处理程序中使用该属性，例如：

$('#modalLaunch a').click(function(){
    $('#openModalContent').load('/listings.php', {id:$(this).data("listing-id")});
});
于 2013-04-03T17:03:58.320 回答