[英]How to use a jQuery .load() call from anchor tag in dynamic content
我有一个搜索页面,该页面从表单获取用户输入,然后将该信息发送到PHP文件,该文件将cURL调用发送到外部服务器。 然后,PHP文件从服务器获取返回的数组,并将某些HTML回显到原始搜索页面中的“结果” div。
我想做的是设置它,以便当用户单击“结果” div中的一个订单项时,将出现一个模态窗口,其中包含有关单击的单个项目的更多信息。
我知道如何创建一个jQuery脚本,该脚本将处理对单个唯一链接的单击,并通过再次查询服务器(通过单独的PHP文件来格式化模态框并附加信息并正确设置大小)来生成模态窗口。 我不知道该怎么办,是用动态创建的内容来处理所有这些。
这是第一个PHP文件的回显:
[在编辑时删除; 见下文]
它对服务器返回的数组中的每个“列表”执行此操作。
单击#modalLaunch div中的anchor标签时,这就是我创建模态窗口的想法(这来自我一直在使用的测试页,用于弄清楚如何操作模态窗口及其内容):
[编辑时删除,请参见下文]
我开始怀疑是否需要完全放弃此方法,并尝试使用“ 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;
});
将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")});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.