爲什麼這段代碼沒有將點擊事件綁定到A標籤？

Question

我有這樣的HTML：

<div class="osoba listItem podrucjaDjelovanja" id="listItem1" style='display:block'> 
    <h3>..</h3> 
    <p>...</p> 
    <p>...</p> 
    <p>...</p> 
    <p>Areas of practice: 
    <a href="/en/aktivnosti/#listItem1A">general legal support</a>, 
    <a href="/en/aktivnosti/#listItem2A">conciliation</a>, 
    <a href="/en/aktivnosti/#listItem4A">civil and commercial contracts </a>, 
    <a href="/en/aktivnosti/#listItem8A">property management</a> 
    </p> 
</div> 

，我想onClick事件綁定到一個標籤。我正在使用這個電話：

$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a').on('click', function(event) { 

這對除了這個（最後一個）以外的所有情況都適用。當我點擊鏈接時，該綁定將被忽略。我不確定我會做錯什麼。

編輯：感謝您的迴應，我認爲它會更容易，如果我指向你的網頁，然後複製粘貼了很多代碼。基本上，該頁面是http://skrobotwp.gandzo.com/en/zaposlenici/，並且偵聽器在ajax.js行36中定義。

Answer 1

那麼我認爲問題是你如何調用.on函數。在jQuery 1.7之前，他們對於.bind，.delegate和.live有單獨的方法。但隨着jQuery 1.7的到來，這些方法已被棄用，通過將它們都包含在1方法.on之下來簡化它們。但由於文檔不太清楚，人們不瞭解.on方法。 .on確實提供了上述3個棄用方法的功能，但它取決於您如何使用.on方法。這裏有一個例子：

// Bind 
$(".podrucjaDjelovanja p a").on("click", function(e) {}); 

// Live 
$(document).on("click", ".podrucjaDjelovanja p a", function(e) {}); 

// Delegate 
$(".podrucjaDjelovanja").on("click", "p a", function(e) {}); 

我的猜測是，標記爲不工作的.on調用時所聲明的錨標記。在這種情況下，您必須按照現場活動的要求來執行.on。所以你需要改變的就是你撥打.on的方式。

$(document).on("click", ".navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a", function(event) { 
    alert("Clicked"); 
}); 

希望這會有所幫助。

Answer 2

該錯誤位於您已顯示的代碼之外的某處。

它工作得很好，從你的問題代碼：http://jsfiddle.net/p4DRg/

$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a').on('click', function(event) { 
    event.preventDefault(); 
    alert(1); 
}); 

也許有一些無效的標籤somehere，使元素最終從你的想法不同。

Answer 3

是您的代碼在JQuery ready？

也能正常工作對我來說：

$(function(){ 
$('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a') 
    .on('click', function(event) { 
     console.log($(this)); 
     return false; 
}); 
}); 

在這裏看到：http://jsfiddle.net/fvDX8/

Answer 4

運行console.log($('.navLeft .menu-item a, #upper-header a, #logo, .podrucjaDjelovanja p a'));，以確保你選擇，你以爲你是元素。

就我所見，您發佈的代碼似乎沒有任何問題。我會看看其他地方。首先驗證您的代碼並確保您已修復任何語法或結構錯誤。

另外，你是否認爲在你點擊的東西前面可能有一個元素？例如，另一個元素的空白部分被覆蓋。使用DOM檢查器來檢查。

Answer 5

您在div中使用了多個類名，這就是爲什麼jquery無法找到該類。我不知道原因，但我認爲它可以正常工作，如果你改變類名稱的位置，如下面的代碼。

<div class="podrucjaDjelovanja osoba listItem" id="listItem1" style='display:block'> 

Answer 6

在ajax.js的123線更換內容：

$('#container').html(json.content);

新元素都有，當然，不附加任何處理程序。您必須將處理程序綁定到新元素，或者首先將其綁定到祖先元素。