javascript - Jquery 事件不适用于动态添加的 Div

Question

我有一个非常烦人的问题。我有一个名为 #log-out 的按钮，当您单击它时，它会将某条数据保存在名为 importantOSdata 的 localStorage 变量中。

当页面加载时，它会检查变量是否!= null，如果不是，则从页面中删除保存在 localstorage 变量中的 div 并将其替换为已保存的 div在 localStorage 变量中。问题是正如标题所说，jquery 事件不会在动态 div 上工作，即使它们在没有保存数据并且只是简单的硬编码 html 时已经工作。我尝试过使用 .on() 但正如您在代码中看到的那样，我使用 this 关键字将无法正常工作。我必须使用 this 关键字。

(1)我的代码有一个 div 的点击事件，并检查它是否具有某种类型的数据标签(数据标题)和普通的旧 src 标签。然后将其传递到一个函数，该函数使用 src 标记中的 src 创建一个弹出 iframe。 (1)曾经有效的代码:

$(".icon").each(function() {
   var iconFile = $(this).attr("data-iconFile");
   var title = $(this).attr("data-title");
   var file = $(this).attr("src");
   $(this).css("backgroundImage", "url(" + iconFile + ")");
   $(this).dblclick(function() {
        new createFrame(file,title);
        addItem($(this).attr("class"),iconFile);
        //canSlideUp = false;
   });
});

我尝试过的新代码:

$(".icon").each(function() {
            var iconFile = $(this).attr("data-iconFile");
            var title = $(this).attr("data-title");
            var file = $(this).attr("src");
            $(this).css("backgroundImage", "url(" + iconFile + ")");
                $(this).on("dblclick",function() {
                    new createFrame(file,title);
                    addItem($(this).attr("class"),iconFile);
                    //canSlideUp = false;
                });
            });
        });

保存/加载代码:

$(document).ready(function() {
    $("#log-out").click(function() {
        alert("Your Progress was saved:"+localStorage.getItem("inportantOSdata"));
        localStorage.setItem("inportantOSdata",document.getElementById("data-holder").innerHTML);
    });
});
window.onload  = function (){
    if(localStorage.getItem("inportantOSdata") != null) {
        $("#data").remove();
        alert("data exists");
        $("#data-holder").html(localStorage.getItem("inportantOSdata"));
    }
}
//localStorage.clear();

你可以看到我如何使用 this 关键字。有任何有趣的问题吗？先谢谢了!

Answer 1

记住，您可以绑定(bind) click向您在其中动态添加元素的容器发送事件。

假设容器是 #container .

您可以使用

将事件绑定(bind)到其子事件

$("#container").on('click', ".xyz" ,function(){
  // good to go.
  // $(this). gives you the handle to each element individually.
});

工作原理:- 即使 subject element在执行此脚本时不存在，它仍然可以正常工作。 因为..

当您绑定(bind).click()时特定元素上的事件然后 jQuery应在第一次执行时检查所有匹配的元素并绑定(bind)事件，但如果稍后添加该元素，则不会绑定(bind)任何事件。

但是当您将事件绑定(bind)到容器并将其范围限制为特定的 .class 时或#id ，那么每次容器注册一次点击时，jQuery检查容器内相应的元素(在我们的例子中是 .xyz )，并且事件是相对于容器而不是元素本身触发的，因此 subject element 的存在在脚本执行时并不重要。

注意:-虽然这种技术很方便，但必须注意将事件绑定(bind)到最近的父容器，因为该方法一旦调用就必须遍历 DOM 来查找所有匹配的元素。一旦提供了足够复杂的 DOM 或动态添加的元素数量达到相当大的数量(受客户端处理能力的限制)，这可能会带来性能风险。所以类似 $(document).on('click', #xyz ,function(){});是严格禁止的。