2012-04-03 21 views
1

看到插入後來標籤說我有這樣的代碼在我的網頁:不是JQuery的

<script language="javascript"> 
$(document).ready(function() { 
    $(".test").click(function() { 
    alert('Hello'); 
    }); 
}); 
</script> 

爲什麼沒有以前的代碼適用於與類「測試」這是我後來添加到文檔中的元素像這樣的例子:

$('body').append('<p class="test">Test</p>'); 

因爲發生的事情是,當我點擊以前<p>標籤沒有任何反應。

另外,如果我有這樣的:

<div id="first">Edit me.<div id="second">Save me.</div></div> 

我可以做什麼文字描述?那就是控制#first div的內容而不影響#second div的內容?

謝謝。

+0

答案是http://stackoverflow.com/questions/203198/jquery-event-binding-on-dynamically-created-elements – 2012-04-03 09:37:53

回答

8

問題是,.click()確實只在該方法執行時爲DOM中可用的元素應用偵聽器。您應該看看.on()

隨着.on()可以委託的情況下,像這樣的例如:

$("body").on("click", ".test", function() { 
    alert('Hello'); 
}); 

現在,任何一個元素與類test可用你的身體內將有一個點擊事件監聽器(當前和未來)。

0

因爲在附加事件處理程序的時候,對象還不存在。你不能訂閱不存在的元素。 您可以爲此使用Live方法。 http://api.jquery.com/live/

看來這些已被棄用(謝謝@Anthony Grist)。改爲使用On或者delegate()。

http://api.jquery.com/on/

http://api.jquery.com/delegate/

$('div').on('click', function() 
{ 
//Do something 
}); 
+0

'.live()'已經被廢棄了超過足夠長的時間,現在多讓人們更好地瞭解。 '.on()'如果你使用jQuery 1.7+,否則'.delegate()'。 – 2012-04-03 09:32:41

+0

'live()'已被棄用,用於'on()'。 – 2012-04-03 09:33:11

+0

就像手冊說你應該使用委託而不是1.7版的live nad而不是live和delegate的函數被棄用 – 2012-04-03 09:33:43

-2

如果你需要應用點擊以後添加標籤,你應該

$(document).on('click','.test',function() { }); 

編輯使用 現場 :@Anthony your're對。直播被棄用。更新了代碼

+0

'live()'已被棄用,以支持'on()'。 – 2012-04-03 09:34:42

+2

需要更多編輯? – 2012-04-03 10:08:39

2

嘗試使用上()監聽器:

$(document).on("click",".test", function() { 

    alert('Hello'); 

}); 
1

當事件綁定到他們只綁定到已創建的那些元素的元素。所以你需要在新元素上再次運行'bind'命令。

或者,您可以使用on('click')將事件綁定到現有和將來的所有元素。

-1

你應該使用「的」綁定與腳本解釋之後添加元素的事件。

$(document).on("click", selector, function(e){ 
    //do something 
});