Question

我在下面有这个代码。你可以猜到，当我按下＆＃34; foobar＆＃34;时，会添加一个新元素。问题：当我点击新元素时没有任何反应，为什么？我正在使用jQuery 2.1。

<div>
  <span>foobar</span>
</div>

<script type="text/javascript">
$("span").on('click', function() {
   $(this).clone().appendTo('div').addClass('new');
   alert("click on first element"); 
});
$(".new").on('click', function() {
   alert("click on second element"); 
});
</script>

Answer 1

两件事

1）您尚未将类正确添加到克隆元素。

2）您还需要事件委派将事件附加到动态添加的元素。

$("span").on('click', function() {
  $(this).clone().addClass('new').appendTo('div');
  alert("click on first element"); 
});

$("div").on('click','.new', function() {
 alert("click on second element"); 
});

<强> Working Demo

Answer 2

使用下面的代码

绑定点击处理程序以动态添加元素

$(document).on('click',"div.new", function() {
   alert("click on second element"); 
});

Answer 3

请尝试以下代码，因为您需要使用事件委派动态添加范围： -

$(document).ready(function(){
   $("span").on('click', function() {
   $(this).clone().appendTo('div').addClass('new');
   alert("click on first element"); 
});
$("div").on('click', ".new", function() {
   alert("click on second element"); 
});
});

演示： -

http://jsfiddle.net/DXQ5j/31/

jQuery：如何引用新元素？

3 个答案: