jQuery中使用.on绑定事件时，event.preventDefault()无效。

Question

自jQuery 1.7起，.live已被弃用，改为使用.on。然而，我在尝试使用jQuery .on及event.preventDefault();时遇到了困难。在下面的示例中，单击锚标签会将我带到链接的页面，而不是阻止默认的浏览器跟随链接的操作。

jQuery('.link-container a').on('click', function(event) {
    event.preventDefault();
//do something
});

然而，使用.live的相同代码却可以毫无问题地运行。

jQuery('.link-container a').live('click', function(event) {
    event.preventDefault();
//do something
});

我目前使用的是随着 Wordpress 3.3.1 一起提供的 jQuery 版本 1.7.1。这里有什么错误吗？

- John

Answer 1

您没有正确地绑定它。当您想要执行您想要做的操作时，.on()方法的工作方式类似于.delegate()。以下是适当使用的示例：

$('.link-container').on('click', 'a', function(event){ 
    event.preventDefault();
})

假设页面加载时就存在.link-container，而不是动态加载的。您需要将委托方法绑定到最近的静态祖先，并在第二个参数中（在这种情况下为'a'）指定委托方法适用于哪些项目。

仅使用$('selector').on('click', function() { })与使用$('selector').click(function(){ })完全相同。

这里是一个jsfiddle的示例：http://jsfiddle.net/gTZXp/

- Andreas Eriksson

---

感谢您清晰的解释。您的示例有效。然而，在页面加载期间仅可用的唯一父容器至少在三个级别以上，并且此嵌套结构中还有其他锚点标记。您的示例开始影响其他锚点标记，这不是我的意图。应该怎么做才能避免这种情况？ - John

通过为锚点标签指定一个单独的类，完成了这个任务。 - John

这是一个解决方案，另一个解决方案是在第二个参数中继续选择器，即不使用 $('#container').on('click', 'a')，而是使用更具体的选择器，例如 $('#container').on('click', '.someContainer .link-container a')。但是使用类也可以正常工作 :) - Andreas Eriksson

谢谢提供的信息。在其他情况下也会很有帮助。 - John

Answer 2

如果您的元素是动态添加的，则需要使用带有过滤器的on()（就像delegate()一样），如下所示：

jQuery('.link-container').on('click', 'a', function(event) {
    event.preventDefault();
    //do something
});

这个假设是基于 .link-container 不是动态的，并且在页面加载时可以访问到它。

- Rory McCrossan

Answer 3

尝试这种方式：

var $j = jQuery.noConflict();

$j(function(){    
     j('.link-container').on('click', 'a', function(event) {
        event.preventDefault();
     });     
});

- Siva Charan