将click处理程序附加到动态生成的锚标记

Question

我动态生成一些标记并将其注入DOM,如下所示:

content+='<td><a class="reportLink" onclick="showReport();return false;" href="'+layerResults.features[i].attributes['Information_External']+'">Info</a></td>';

我知道使用jQuery附加click处理程序而不是使用内联处理程序会更好.

问题是,即使使用内联处理程序和这样的函数:

function showReport() {
  console.log('stopped');
}

仍然不会阻止链接从我的页面导航.

第二个问题是,当我尝试使用时

jQuery('.reportLink'.on('click', function(e) {
  e.preventDefault();
  console.log('clicked');
});

事件永远不会附加.我正在使用jQuery 1.7.2.

这让我有点疯狂,因为这是一个简单的任务,我已经在jQuery <= 1.5中完成了大量的事情.

Answer 1

将事件处理程序委托给加载dom时存在的父元素.您可以替换body该父级.

jQuery('body').on('click','.reportLink', function(e){
   e.preventDefault();
   console.log('clicked');
});

来自jquery docs .on()

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on()时的页面上.要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定.如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序.或者,使用委托事件来附加事件处理程序,如下所述.

委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要.例如,此元素可以是模型 - 视图 - 控制器设计中视图的容器元素,如果事件处理程序想要监视文档中的所有冒泡事件,则可以是文档.在加载任何其他HTML之前,文档元素在文档的头部可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪.

除了能够处理尚未创建的后代元素上的事件之外,委派事件的另一个优点是,当必须监视许多元素时,它们可能会有更低的开销.在其tbody中包含1,000行的数据表中,此示例将处理程序附加到1,000个元素: