html - 如何在动态生成的锚标签上生成事件

Question

我试图在锚标记上生成一个事件，该标记本身位于 jquery 动态生成的表行内。但我无法这样做。请让我知道它不起作用并且可以完成。这是我的 html 和 jquery 代码。

HTML
<a href="#" id="1"  class="genrow" ><img src="images/add.png"  border="0" /></a>

JQuery Code
$(".genrow").click(function (){
var newRow = jQuery('<tr><td>1</td>
<td"><a href="#" class="genevent" ><img src="add.png"/></a></td></tr>');
});

$(".genevent").click(function (){    
 alert("Generate event");
});

为什么 .genevent 上的单击功能不起作用。

Answer 1

由于锚标签是动态添加的，所以需要使用event delegation注册事件处理程序

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', '.genevent', function(event) {
    event.preventDefault();
    alert("Generate event"); 
});

演示：小提琴

Answer 2

使用on事件委托。并将其委托给最近的静态父级

 $(document).on('click',".genevent",function (){    
     alert("Generate event");
 });

Answer 3

在动态生成的元素上使用.on() 。

由于动态生成的元素在 DOM 就绪时不是 DOM 的一部分 o 页面加载您不能直接绑定事件，因此您必须使用Event Delegation.

$(document).on('click',".genevent",function (){    
     alert("Generate event");
});

句法

$( elements ).on( events, selector, data, handler );