JS：追加找不到attr

Question

$(".btn").click(function()
{
    $(".content").append(
    "<div class='randomDiv' id='1'></div>"
    );
}

如果以上是＆＃34;有效＆＃34;然后我不能：

$(".randomDiv").click(function()
{
    alert($(this.attr("id")));
}

我用google搜索并发现这是因为JS在我追加之前已经加载了，但是还没有找到解决方法如何在加载后注册＃34;在JS。

Answer 1

或者：

在创建元素

时附加事件处理程序

$(".btn").click(function() {
    $("<div class='randomDiv' id='1'></div>")
        .on("click", myFunction)
        .appendTo(".content");
}

function myFunction() {
    alert($(this.attr("id")));
}

...所以绑定事件处理程序

时， 元素存在

使用委托处理程序

$(document).on("click", ".randomDiv", function () {
    alert($(this.attr("id")));
});

...捕获所有点击事件，因为它们冒泡文档并检查它们来自哪些元素。

Answer 2

如果动态追加元素，则普通点击功能不起作用。使用

$(document).on("click",".randomDiv",function(event){
       alert($(this).attr("id"));
});

Answer 3

$(".content").on('click', '.randomDiv', function()
{
    alert($(this.attr("id")));
}

$（＆＃34; .content＆＃34;）可以替换为randomDiv的任何现有父项。假设内容div在页面左侧div中，那么上面的代码可以写成

$(".page-left").on('click', '.randomDiv', function()
{
    alert($(this.attr("id")));
}

甚至

$(document).on('click', '.randomDiv', function()
{
    alert($(this.attr("id")));
}

将事件绑定到DOM中的文档级别

根据jQuery的版本，您应该使用live，delegate，bind或on function。