jQuery調用已由ajax加載的div元素，或通過html（）方法插入的div元素

這是我在stackoverflow上的第一篇文章。我在這裏搜索了類似的問題，並找到了一些答案，但無法真正找到解決這個問題的方法，這對我有幫助。jQuery調用已由ajax加載的div元素，或通過html（）方法插入的div元素

我有一個網頁加載ajax的主要內容。簡單如此：

function loadContent(content) { 

if(localStorage.content != content) { 
    $("#content #content_loading").css("display", "block"); 
} 

var userID = Cookies.get("UserID"); 

$.ajax({      
    url: '../game/data/load_content.php',  
    type: 'post', 
    data : { ID : userID, Content : content },     
    success: function(response) { 
     $("#content #content_loading").css("display", "none"); 
     $("#content #import").html(response); 
     localStorage.content = content; 
     $("#header").html("<div class='header_text'>"+content+"</div>"); 
     } 
}); }

它加載其他ajax函數，html和css。由於我有成千上萬行代碼，所以簡單的事情就變得更加棘手。現在我只想爲彈出窗口創建一個通用的「關閉」按鈕。所有彈出窗口都在一個框中，關閉按鈕位於框標題內。現在我要關閉所有彈出窗口與單一功能：

$('.close').click(function() { 
    $(this).parent().parent().fadeOut(); 
});

這只是選擇關閉元素，這是標題，然後是父母這是整個盒子的父母的父母。其中一個彈出式功能如下所示：

function showPopup(header, content) { 
    $("#popup_header").html(header+"<div class='close'></div>"); 
    $("#popup_content").html(content); 
    $("#popup").fadeIn(300); 
}

此功能包含在主文檔（<script src="script"></script>）中。

然後另一個彈出窗口直接加載到loadContent（content）函數上，所以它加載了ajax調用。而且它只是HTML，看起來像這樣：

<div id="nearby_players"> 
    <div class="header">PLAYERS NEARBY <div class="close"></div></div> 
     <ul> </ul> 
</div>

現在，如果我是AJAX是加載它會工作在文檔中點擊時插入「關閉」功能。如果我將loadPopup（）函數更改爲：

function showPopup(header, content) { 
    $("#popup_header").html(header+"<div class='close'></div>"); 
    $("#popup_content").html(content); 
    $("#popup").fadeIn(300); 
     $(".close").click(function() { 
      $(this).parent().parent().fadeOut(); 
     }); 
}

它也可以工作。但我想要做的是創建一個附加到主文檔的單擊功能，該功能將關閉所有可能在網頁上加載或已經在網頁上彈出的彈出窗口。我認爲這是一個問題，因爲'關閉'元素是一個ID不是一個類。而且，因爲它應該是獨一無二的，所以我將它改爲了課堂。所以我的問題是。我如何引用類「close」中的所有元素，無論它們是否正在加載ajax，然後在那個ajax中，它們會再次與另一個ajax一起加載，等等。還有當網頁被加載時已經插入到文檔中的彈出窗口？

如何將這些元素添加到DOM讓jQuery實際發現它？

Regards， Hazes！

來源

2016-11-23 Hazes

您可以動態創建元素，這意味着事件不會附加到它們。請閱讀如何將事件附加到動態創建的元素：http://api.jquery.com/live/

來源

2016-11-23 15:17:24 malutki5200

最好不要引用不推薦使用的事件處理程序。改用'.on（）'。 – Shikkediel

是的，抱歉，我忘了它已被棄用。謝謝。 – malutki5200

非常感謝。我嘗試使用.on（），但即使將事件綁定到文檔本身，它似乎也不起作用。但後來我意識到我的jQuery版本是3.1.0而不是3.1.1。非常感謝。 – Hazes

jQuery調用已由ajax加載的div元素，或通過html（）方法插入的div元素

回答

相關問題