0

单击它时我有一个链接，它会在其中创建一个带有另一个链接的 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>
4

1 回答 1

2

由于链接是动态添加的，您应该使用该on()方法（假设 jQuery >= 1.7; jQuery < 1.7 应该使用delegate()）来防止所述链接的默认操作：

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

JS 小提琴演示。

您遇到的问题是发生事件绑定时链接不存在，因此该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元素有一个点击处理程序，正如您可能想象的那样，它简单地返回false：

$("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;
});

JS 小提琴演示。

在上面的注释中，单击a.mylink元素时不会触发警报，而如果没有click-handler 拦截（和否定）click事件，alert() 则会触发：

$("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();
    alert(e.type + ' event reached the ".cities" element!');
});

JS 小提琴演示。

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

参考：

于 2013-01-26T21:59:25.367 回答