插入动态 HTML 和 jquery 后点击不起作用

Question

我试图通过单击 div 来实现代码的可重用性，它会给出 div 的 numberDiv 属性。它适用于具有 class 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 来触发通过在表单输入字段上设置 "focus" 来触发的事件，也就是说，当您单击它并且与它互动。我尝试使用 "focus" 方法，但它一遍又一遍地提醒同样的事情，直到我关闭选项卡，然后我才能摆脱警报无限循环。谢谢！

Answer 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);
});

Answer 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");

插入动态 HTML 和 jquery 后点击不起作用

on click does not work after inserting dynamic HTML with jquery

html

javascript

jquery

jquery-selectors