附加单击处理程序，以动态生成的定位标记

我动态生成一些标记，并将其注入到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的< = 1.5做却有无数次。

来源

2012-08-06 Jim Wharton

委托的事件处理程序存在于DOM被加载时父元素，你可以与父母代替body。

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

从jquery的文档.on()

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

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

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

来源

2012-08-06 21:27:08

这是我在另一个线程中找到的确切解决方案，但它并未解雇。我将它放在创建DOM节点的地方，并且它完美地工作。谢谢。 – 2012-08-07 00:26:39

，以防止其浏览了，进入这个权利的console.log后“（‘停止’）;

return false;

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

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

来源

2012-08-06 21:27:00 Losbear

返回false不是消除冒泡的正确方法。但不可否认，我确实尝试过。 – 2012-08-07 00:27:51

附加单击处理程序，以动态生成的定位标记

回答

相关问题