使用jquery插入动态HTML后点击不起作用[重复]答案

【问题标题】：on click does not work after inserting dynamic HTML with jquery [duplicate]使用jquery插入动态HTML后点击不起作用[重复]
【发布时间】：2015-03-31 05:23:27
【问题描述】：

我试图通过每次单击 div 来实现代码的可重用性，它会给出 div 的 numberDiv 属性。它适用于具有divClassSelector 类的第一个默认 div，但我还有一些其他 js 代码，每当您按下按钮“+1 Div”时，都会插入另一个 div。然后，当我尝试提醒新创建的 div 的 numberDiv 属性时，它不起作用。我假设这是因为第一次加载页面时新创建的 div 不存在于 DOM 中，因此找不到新的 div。不过我可能是错的。

有人知道这个问题的解决方法吗？非常感谢任何帮助。

这是我的代码：

//HTML
...
<body>
    <div class="divClassSelector" numberDiv="1"></div>
    <button id="plusOneDiv">+1 Div</button>
</body>
...

//My JS:

//Code to alert the div's numberDiv attribute value
$(".divClassSelector").on("click", function(){
    var numberDiv = $(this).attr("numberDiv");
    alert(numberDiv);
});

//Code to insert another div
var count = 2;
$("#plusOneDiv").click(function(){
    $(body).append(<div class="divClassSelector" numberDiv="'+count+'">');
    count++;
});

提前感谢您的帮助和欢呼！

更新 1：

有谁知道如何在单击 div 时触发一个事件，该事件是通过将“焦点”放在表单输入字段上触发的，也就是说，当您单击它并与之交互时。我尝试使用“焦点”方法，但它一遍又一遍地提醒同样的事情，直到我关闭选项卡，然后我才能摆脱警报无限循环。谢谢！

【问题讨论】：

使用data-div-no="count"作为div属性的html标准
您也可以使用$(body).delegate('.className', 'click', function() {//your code goes here});或点击此链接api.jquery.com/delegate
检查控制台，您的代码中可能有错误。可能$(body).append(<div class="divClassSelector" numberDiv="'+count+'">');你错过了'<div
不要在 focus() 处理程序中使用 alert()。您的焦点处理程序触发，弹出警报，触发blur() 事件。您关闭警报，触发focus() 事件，该事件弹出警报，并且您有一个无限循环。如果您只是避免使用alert()，将事件绑定到focus() 将可以正常工作。

标签： javascript jquery html jquery-selectors

【解决方案1】：

首先将这个'$'添加到你的代码中：--$(this).attr("numberDiv");--

$(".divClassSelector").on("click", function(){
var numberDiv = $(this).attr("numberDiv");
alert(numberDiv);
});

还将您的点击功能更改为

$(document).on("click",".divClassSelector", function(){
var numberDiv = $(this).attr("numberDiv");
alert(numberDiv);
});

【讨论】：

我有，其实我忘记放了。还是不行
ok，那就用这个点击功能，代替那个。
.on(".divClassSelector","click", 假设是.on("click",".divClassSelector",
谢谢它确实有效。如果可能，您能否详细说明我的帖子的更新 1？谢谢！
是的，我知道那个。您在上面制作的选择器是 .delegate() 方式，而不是 .on() 方式。新来者会感到困惑，并且总是使用新版本的代码，因为旧版本将被弃用。

【解决方案2】：

$(document).on('click', '.divClassSelector', function(){
var numberDiv = $(this).attr("numberDiv");
alert(numberDiv);
});

或

$('body').on('click', '.divClassSelector', function () {...})

你忘了$

var numberDiv = (this).attr("numberDiv");

到

 var numberDiv = $(this).attr("numberDiv");

【讨论】：

我有，其实我忘记放了。还是不行
你试过用$(document).on('click', '.divClassSelector', function(){
谢谢它确实有效。如果可能的话，您能否详细说明我的帖子的更新 1？谢谢！
@JackGal 然后批准答案