[英]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.