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

为什么单击.genvent上的函数不起作用。

Answer 1

由于动态添加了锚标记，因此需要使用event delegation来注册事件处理程序

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

演示：Fiddle

Answer 2

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

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

Answer 3

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

由于动态生成的元素不是DOM准备好的页面加载的DOM的一部分，因此您无法直接绑定事件，因此必须使用Event Delegation。

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

语法

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

如何在动态生成的锚标记上生成事件

3 个答案: