javascript - 在动态附加的内部元素中,如何附加click事件?

我在父div中添加了一系列 div 。 附加click事件绑定父元素。


var element ="";


for (var j = 0; j <10; j++) {


 element = element +"<div class='aClass'>"+j+"</div>";


}



$(".wrapper").append(function() {


 return $(element).click(foo);


});



function foo() {


 alert("index of element is:");


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="wrapper"></div>

我需要知道点击了哪个附加的div。

时间:

若要获取对引发事件的元素的引用,请在事件处理程序中使用 this 关键字。 要检索它的索引,可以使用jquery方法的index()

另请注意,通过在一个操作中附加所有HTML,并且使用单个委托事件处理程序,可以使您的逻辑更简洁。 尝试这个:


var elements = (new Array(10)).fill('<div class="aClass">j</div>');



$(".wrapper").append(elements).on('click', '.aClass', function() {


 console.log(`index of element is: ${$(this).index()}`);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="wrapper"></div>
...