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

Question

我动态生成一些标记并将其注入到 DOM 中，如下所示：

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

我知道最好使用 jQuery 来附加点击处理程序，而不是使用内联处理程序。

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

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

仍然不能阻止链接离开我的页面。

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

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

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

这让我有点发疯，因为这是我在 jQuery

Answer 1

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

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

来自 jquery 文档.on()

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

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

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

Answer 2

为了防止它离开，在 "console.log('stopped'); 后面输入这个。

return false;

对于第二个，我通常使用这种语法，也许它会有所帮助：

jQuery(".reportLink").click(function() {
    //do something
});