Question

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

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

（1）我的代码有一个div的click事件，并检查它是否具有某种类型的data-tag（数据标题）和一个普通的旧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

请记住，您可以将click事件绑定到动态添加元素的容器中。

所以我们假设容器是#container。

您可以使用

将事件绑定到其子项

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

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

当您在特定元素上绑定.click()事件时，jQuery将检查所有匹配元素并在第一次执行时绑定事件，但如果稍后添加该元素，那么没有事件束缚它。

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

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

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

1 个答案: