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

從jQuery 1.7開始，.live已被棄用，替換爲.on。但是，我很難讓jQuery .on與event.preventDefault();一起使用。在下面的示例中，單擊錨標籤會將我帶到鏈接頁面，而不是阻止遵循鏈接的默認瀏覽器操作。event.preventDefault（）;沒有在jQuery中使用.on

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 
});

我使用的jQuery版本1.7.1目前與Wordpress 3.3.1一起發貨。我在這裏弄錯了什麼？

來源

2012-02-20 John

你沒有正確地綁定它。 .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/

來源

2012-02-20 10:14:50

THX一個明確的解釋。你的例子工作。但是，頁面加載期間唯一可用的父容器至少有3個級別，並且此嵌套結構中還有其他定位標記。你的例子開始影響其他的錨標籤，我不打算這樣做。應該做些什麼以避免相同？ – John 2012-02-20 10:34:44

通過爲定位標記指定單獨的類來完成此操作。 – John 2012-02-20 11:07:30

這是一個解決方案，另一個是繼續在第二個參數中的選擇器，即，而不是使用$（'＃container'）。on（'click'，'a'）'，您可以使用更具體的選擇器，像'$（'＃container'）。on（'click'，'.someContainer .link-container a'）'。但是，使用一個類只是丹迪:) – 2012-02-20 13:50:10

如果被動態地添加你a元素，你需要使用on()使用過濾器（如delegate()使用是），像這樣：

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

這使得假設.link-container不動態，並且在頁面加載時可供DOM使用。

來源

2012-02-20 10:15:38

試試這個方法： -

var $j = jQuery.noConflict(); 

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

來源

2012-02-20 10:18:28

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

回答

相關問題