Question

我有一个链接，当点击它创建一个div与其中的另一个链接我想要禁用新链接尝试了许多解决方案，如preventDefault并返回false但没有工作，这里是示例http://jsfiddle.net/2RSJj/1/：

$(document).ready(function(){
$("a[title='go']").click(function(e){
    $(".cities").append("<div class='city'><a href='http://www.google.com' class='mylink'>google</aiv>"); 
    e.preventDefault();
});

$(".cities .city a").click(function(e){
    e.preventDefault();
    alert($(this).attr("class"));
});

});

主要的HTML：

<a href="#" title="go">go</a><p>
<div class="cities">

</div>

Answer 1

在动态添加链接时，您应该使用on()方法（假设jQuery＆gt; = 1.7; jQuery＆lt; 1.7应该使用delegate()）来阻止所述链接的默认操作：< / p>

$('.cities').on('click', 'a.mylink', function(e){
    e.preventDefault();
});

JS Fiddle demo

您遇到的问题是当事件绑定发生时链接不存在，因此click()方法不会将click事件绑定到相关的a元件。使用on()，click附加到父/祖先元素（存在于事件绑定点），然后侦听该事件（第一个'click'字符串参数）在与选择器匹配的元素上被触发（作为第二个参数传递）。

假设事件和选择器都匹配（a.mylink元素是click - ed），则执行该函数，在这种情况下，只会阻止触发默认操作。但是，重要的是要注意，对于委派事件，不能简单地return false，因为根据定义，事件在传播/冒泡到祖先时已经被触发了事件绑定的元素。

此外，如果两个元素之间的元素具有显式实现return false的事件处理程序，则事件委托将不会超过该元素（因为click将传播/冒泡到元素使用处理程序，它将使用return false（event.stopPropagation()和event.preventDefault()的组合）进行回复。

例如，在以下代码中，我使用的是html：

<a href="#" title="go">go</a><p>
<div class="cities">
    <div class="demo">
    </div>
</div>

在这种情况下，on()方法仍然附加到.cities元素，但.demo元素有一个点击处理程序，正如您可能想象的那样，返回{{1} }：

false

JS Fiddle demo

在上面的注释中，单击$("a[title='go']").click(function(e){ $(".demo").append("<div class='city'><a href='http://www.google.com' class='mylink'>google</a></div>"); e.preventDefault(); }); $('.cities').on('click', 'a.mylink', function(e){ e.preventDefault(); // using an alert because a simple 'e.preventDefault()` wouldn't // be visibly different to the 'return false' alert(e.type + ' event reached the ".cities" element!'); }); $('.demo').click(function(e){ return false; });元素时没有触发警报，而没有a.mylink - 处理程序拦截（并否定）click事件，{{1 被解雇：

click

JS Fiddle demo

因此，请注意使用委托时绑定到元素的那些事件。启动时可能很棘手（ish）。

参考：

delegate()。
on()。

如何通过jquery禁用由另一个链接创建的链接（包括jsfiddle）

1 个答案: