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

Posted 2023-05-09

【中文标题】jQuery调用已被ajax加载或通过html()方法插入的div元素

【英文标题】：jQuery calling div element that has been loaded by ajax, or inserted via html() method

【发布时间】：2017-04-07 15:07:23

【问题描述】：

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

我有一个通过 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 而不是类。因为它应该是独一无二的，所以我把它改成了类。所以我的问题是。我如何引用所有具有“关闭”类的元素，无论它们是用 ajax 加载的，然后在该 ajax 中它们再次用另一个 ajax 加载，依此类推。还有网页加载时已经插入到文档中的弹出窗口？

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

问候， 雾霾！

【参考方案1】：

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

【讨论】：

最好不要引用已弃用的事件处理程序。请改用.on()。

是的，对不起，我忘了它已被弃用。谢谢。

非常感谢。我尝试使用 .on() 但即使我将事件绑定到文档本身，它似乎也不起作用。但后来我意识到我的 jQuery 版本是 3.1.0 而不是 3.1.1。再次非常感谢。