jQuery圖片點擊功能沒有效果

我有一種情況，只有第一次點擊的圖像工作，第二次點擊時，其他功能不運行。jQuery圖片點擊功能沒有效果

<script> 
jQuery(document).ready(function($) { 
    $('#temp_container img').click(function(){ 
    var img = $('#temp_container img').attr('src'); 
    $('#temp_container2').append('<img src="'+img+'">'); 
    }); 

    $('#temp_container2 img').click(function(){ 
    alert('works'); 
    }); 
}); 
</script> 

<div id="temp_container"> 
    <img src="http://cdn-images.farfetch.com/10/62/22/35/10622235_3103339_170.jpg"> 
</div> 
<div id="temp_container2"></div>

當您單擊DIV temp_container的圖像，圖像被複制並追加到temp_container2，在DIV temp_container2在圖像上單擊時，應執行的警報。但由於某些原因，這不會在運行時執行。我一直堅持這個問題幾個小時。

感謝

來源

2014-02-24 user2028856

查看jQuery中的委託事件 - 由於您在＃temp_container2中有任何內容之前聲明瞭第二個偵聽器，因此您無法直接在此處綁定它。 –

由於dom更新...你將不得不使用on（）方法...檢查事件代理 – sinisake

https://learn.jquery.com/events/event-delegation/ –

您需要使用on()爲你動態地添加元素的事件代表團。

Demo

$('#temp_container2').on('click', 'img', function(){ 
    alert('works'); 
});

雖然增加在$('#temp_container2')元素，你可能需要使用$(this).attr('src')代替$('#temp_container img').attr('src')

$('#temp_container img').click(function(){ 
    var img = $('#temp_container img').attr('src'); 
    $('#temp_container2').append('<img src="'+img+'">'); 
});

委派事件

Delega特德事件具有的優點是，他們可以處理來自後來添加到文檔中的後代元素的事件。通過採摘這是保證出席委派的事件處理程序連接時的元素，你可以使用委派事件避免需要經常重視和移除事件處理程序，jQuery doc

來源

2014-02-24 11:13:07 Adil

+1回答同樣的問題，但你做了它，所以只是添加了一個演示，所以希望你不介意:) –

我會感激。很高興你... – Adil

感謝您的真正有用的答覆。我一直在測試這個，我注意到如果temp_container2上面有另一個div，那麼on（）似乎不起作用 http://jsfiddle.net/H57xr/ – user2028856

$('#temp_container img').click(function(){

應該是

$('#temp_container').click(function(){

或者你可以爲圖像本身創建一個新的div，這使得它更容易。

來源

2014-02-24 11:13:11 user3319187

jQuery圖片點擊功能沒有效果

回答

相關問題