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版。我在这里遇到了什么错误？

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/

Answer 2

如果您动态添加了a个元素，则需要将on()与过滤器一起使用（如delegate()所示），如下所示：

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

这假设.link-container不是动态的，并且在页面加载时可用于DOM。

Answer 3

尝试这种方式： -

var $j = jQuery.noConflict();

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

event.preventDefault（）;在jQuery中没有使用.on

3 个答案: