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

Jquery Events Not Working For Dynamically Added Divs

本文关键字：添加 潜水 动态 适用于 事件 不适用 Jquery      更新时间：2023-09-26

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

当页面加载时，它会检查变量!= null是否为，如果不是，则会从页面中删除保存在localstorage变量中的div，并将其替换为保存在localStoragevariable中的div。问题是，正如标题所说，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();

你们可以看到我是如何使用这个关键字的。有这个有趣的问题吗？提前感谢！

记住，您可以将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），并且该事件是相对于容器而非元素本身触发的，所以CCD_ 15的存在在脚本执行时并不重要。

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

相关文章：