如何在动态内容中使用jQuery .load()调用锚标记


How to use a jQuery .load() call from anchor tag in dynamic content

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

我想做的是设置它,这样当用户单击"结果"div中的一个行项时,就会出现一个模态窗口,其中包含有关所单击的单个项的更多信息。

我知道如何创建一个jQuery脚本,将处理点击一个单一的,唯一的链接,并通过查询服务器再次生成模态窗口(通过一个单独的PHP文件,格式的模态框与额外的信息和大小正确)。我不知道的是如何处理所有这些动态创建的内容。

下面是第一个PHP文件回显的内容:

[remove at edit;见下文)

它对服务器返回的数组中的每个"清单"执行此操作。

当点击#modalLaunchdiv中的锚标记时,我发现了创建模态窗口的方法(这来自一个测试页面,我一直在用它来弄清楚如何操纵模态窗口及其内容):

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

我开始怀疑我需要完全放弃这种方法,并尝试使用"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伪类的影响时才会变得不透明。建议吗?

如果你想让你的动态生成的内容能够做的东西,如果你使用JQuery 1.9及以上的尝试:

$(document).on('click','#openModalContent li',function(){
    var href = $(this).children('a').attr('href');
    $('#yourModalBox').load(href).show(888);
    return false;
});

在生成的HTML中为锚添加data-listing-id属性:

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

并在点击处理程序中使用该属性,如:

$('#modalLaunch a').click(function(){
    $('#openModalContent').load('/listings.php', {id:$(this).data("listing-id")});
});