jQuery事件處理程序只適用於第一個元素

我似乎無法弄清楚爲什麼只有第一個元素調用顯示警報的事件處理程序。我發現堆棧溢出的其他類似問題與使用ID而不是類有關，但這不是我的問題。jQuery事件處理程序只適用於第一個元素

當我點擊第一個元素旁邊的'x'時，它將按預期方式顯示警報，但未能爲通過追加按鈕動態添加的其他元素執行此操作。

這裏有一個最小的，但完整的例子：

$("a.test").click(function() {

到

$("a.test").live('click', function() {

爲什麼只有第一個元素是工作的原因是因爲當時

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>test</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

    $(function() { 

    $(".append").click(function(){ 

     $('.container').append('<div class="box"></div>') 
     $('.box:last').append('<div class="text"><span>ABCDEFG</span><br/></div>') 
     $('.box:last').append('<a href="#" class="test">x</a>') 

    }); 

     $("a.test").click(function() { 
     alert("works only for the first item in the list"); 


    }); 


    }); 


}); 

</script> 
    <style> 
     .box { 
      padding:3px; 
      margin-bottom:3px; 
      border-bottom:2px solid #fff; 
      width:550px; 
     } 
     .box:hover{background-color:#fff;} 

     #container { 
      position:relative; 
     } 

     .text { 
      float:left; 
      width:300px; 
      font-size:13px; 
     } 
     .text span { 
      font-size:18px; 
      line-height:23px; 
      font-weight:700; 
     } 

    </style> 
</head> 

<body> 

    <div class="container"> 

    <input type="button" class="append" value="Append"> 

     <div class="box"> 
    <div class="text"><span>ABCDEFG</span></div> 
    <a href="#" class="test">x</a> 
    </div> 

    </div> 

</body> 
</html>

來源

2011-03-27 Raj

變化click事件附加，只有一個<a>欖仁nt在頁面上。您需要明確地將點擊事件處理程序添加到每個創建的錨點，或者使用實時事件。閱讀有關live事件處理程序的更多信息。

來源

2011-03-27 04:54:08 Anurag

就是這樣。我正在學習jQuery，並被這個問題困擾了幾天。感謝您提供清晰，簡潔的答案。 – Raj 2011-03-27 14:18:18

'.live（）'在1.7中被棄用，即使在使用舊版jQuery的項目中也不鼓勵它的使用。 – saluce 2012-07-30 16:00:41

@saluce - 好點，但是當我寫這個答案的時候，「活着」真是充滿活力和繁榮。 – Anurag 2012-07-30 17:32:42

當您使用bind（click是bind("click", ...)的快捷鍵）連接事件處理程序時，只會掛接已存在的元素。以後添加的新的不是。

可以使用~~live或~~delegate功能，或on功能代表團特徵，或單獨掛鉤起來，當你添加它們：

Live example - 使用最新的jQuery和delegate（您還可以使用on，但我喜歡delegate如何記錄我的意圖）：

jQuery(function($) { 

    $("#theButton").click(function() { 
    $("#container").append(
     "<div><a class='test' href='#'>X</a></div>" 
    ); 
    }); 

    $("#container").delegate("a.test", "click", function() { 
    alert("Clicked"); 
    }); 

});

Live example - 使用最新的jQuery和on（注意，參數的順序從delegate是不同的）：

jQuery(function($) { 

    $("#theButton").click(function() { 
    $("#container").append(
     "<div><a class='test' href='#'>X</a></div>" 
    ); 
    }); 

    $("#container").on("click", "a.test", function() { 
    alert("Clicked"); 
    }); 

});

Live example - 用你的jQuery vesion （1.3.0？）和掛鉤起來當你添加它們：

jQuery(function($) { 

    $("#theButton").click(function() { 
    $("<div><a class='test' href='#'>X</a></div>") 
     .click(aTestClick) 
     .appendTo("#container"); 
    }); 

    $("a.test").click(aTestClick); 

    function aTestClick() { 
    alert("Clicked"); 
    } 

});

題外話（略）：

的jQuery 1.3.0是發佈和兩年多的過時。當前版本（截至2011年3月的原始答案）爲1.5.1，即使您想堅持使用1.3樹，在1.3.0之後也沒有一個，而是兩個維護版本。
您正在使用兩個獨立的ready調用，首先是顯式調用，然後是隱式調用（您的$傳入函數）。只有一個是必要的。
強烈推薦不是依靠分號插入，它是魔鬼的產生。用分號結束語句，以確保腳本可以縮小/壓縮/打包，僅僅因爲解釋者有時會猜錯。

來源

2011-03-27 04:54:57

感謝您的示例。實際上，我在我的代碼中使用了最新版本的jQuery，但是我發現了一些在線的東西，顯然有點舊，它使用了當時的版本，這就是我最基本的例子。感謝您提及兩個準備好的調用 - 我只是在加快jQuery並欣賞指針。我來自Python，語義上有意義的空白是常態---需要養成用分號結束語句的習慣。再次感謝！ – Raj 2011-03-27 15:28:55

@Raj：不用擔心，希望有幫助！最好的， – 2011-03-27 15:40:13

'.live（）'不推薦使用1.7，建議在1.7之前使用'.on（）'，1.7之前使用'.delegate（）'。 – saluce 2012-07-30 15:59:27

您的事件處理程序不會被添加到隨後添加的元素。有幾種方法可以動態地附加事件處理程序。對於較新版本的jQuery（1.7+），使用帶選擇器的.on()函數。

$('.container').on('click', 'a.live', function() { alert("I'm on"); });

的jQuery的舊版本沒有.on()，所以你可以使用.live()。不過，有一點需要注意的是，.live()已在1.7中棄用。

$('a.live').live('click', function() { alert("I'm live"); });

即使jQuery開發團隊建議使用替代.live()，無論jQuery的版本所使用。對於1.7以上的版本，請使用.delegate()。

$('.container').delegate('a.test', 'click', function() { alert("I'm delegated"); });

來源

2012-07-26 18:31:59 saluce

jQuery事件處理程序只適用於第一個元素

回答

相關問題