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＆lt; = 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个元素：

Answer 2

为防止它导航，请在“console.log（'stopped'）之后输入此内容;

return false;

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

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

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

2 个答案: