jQuery 调用已由 ajax 加载或通过 html() 方法插入的 div 元素

Question

这是我在 Whosebug 上的第一个 post。我在这里搜索了类似的问题并找到了几个答案，但无法真正找到对这个特定问题有帮助的解决方案。

我有一个通过 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。由于我有成千上万行代码，简单的事情变得更加棘手。现在我只想为弹出 windows 创建一个通用 'close' 按钮。所有弹出窗口 windows 都在一个框中，关闭按钮在框内 header。现在我想用一个函数关闭所有弹出窗口 windows：

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

这只是选择关闭元素的 parent，即 header，然后是 parent 的 parent，即整个框。其中一个弹出函数如下所示：

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 正在加载的文档中单击并插入 'close' 函数，它将起作用。如果我将 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();
        });
}

它也有效。但我想要做的是创建一个附加到主文档的单击功能，该功能将关闭网页上正在加载或已经在网页上的所有可能的弹出窗口。我认为这是一个问题，因为 'close' 元素是一个 ID 而不是 class。因为它应该是唯一的，所以我将其更改为 class。所以我的问题是。我如何引用所有带有 class 'close' 的元素，无论它们是否正在加载 ajax，然后在 ajax 中再次加载另一个 [=50] =] 等等。还有网页加载时已经插入到文档中的弹出窗口？

如何将这些元素添加到 DOM 以便 jQuery 真正找到它？

此致，阴霾！

Answer 1

您动态创建元素，这意味着事件不会附加到它们。请阅读如何将事件附加到动态创建的元素：http://api.jquery.com/live/

jQuery 调用已由 ajax 加载或通过 html() 方法插入的 div 元素

jQuery calling div element that has been loaded by ajax, or inserted via html() method

javascript

ajax

jquery

dom

elements