jQuery刪除父級onclick不適用於新元素

我正在創建一個具有動態數量的選項的窗體。刪除選項適用於從一開始就存在的項目，但動態生成的項目無法刪除。任何人都有線索？jQuery刪除父級onclick不適用於新元素

HTML：

<div class="options"> 
    <div><input type="text" name="option[]" value="Option A"> <a href="#" class="delete_option">Delete</a></div> 
    <div><input type="text" name="option[]" value="Option B"> <a href="#" class="delete_option">Delete</a></div> 
    <div><input type="text" name="option[]" value="Option C"> <a href="#" class="delete_option">Delete</a></div> 
</div> 
<a href="#" class="new_option">Add a new option</a>

的Javascript：

jQuery('a.new_option').click(function(){ 
    jQuery('div.options').append('<div><input type="text" name="option[]" value=""> <a href="#" class="delete_option">Delete</a></div>'); 
}); 

jQuery('a.delete_option').click(function(){ 
    jQuery(this).parent('div').fadeOut(); 
});

來源

2014-01-20 dirk

的[事件綁定的動態創建的元素嗎？]可能重複（http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created -elements） –

您需要使用event delegation用於動態創建的元素：

jQuery('div.options').on('click', 'a.delete_option', function(){ 
    jQuery(this).parent('div').fadeOut(); 
})

來源

2014-01-20 16:05:09 Felix

感謝您的建議，這工作！我會盡快接受你的答案。 – dirk

@dirk很高興幫助：D – Felix

使用.on()

jQuery.on('click', 'a.delete_option', function() { 
    jQuery(this).parent('div').fadeOut(); 
});

Event Delegation

來源

2014-01-20 16:05:54

你應該使用。對方法，讓它代表對新元素的事件。

jQuery(document).on('click','a.delete_option',function(){ 
jQuery(this).parent('div').fadeOut(); 
});

這裏有一個新的小提琴 http://jsfiddle.net/rjC6C/

來源

2014-01-20 16:08:03

雖然這是委託的正確語法，但是'.on'本身並不代表_delegate_。 [...] [...]從jQuery 1.7開始，.on（）方法提供了附加事件處理程序所需的全部功能[...]']（http://api.jquery.com/on/）so' .on'是添加_direct_和_delegate_監聽器的首選方式，只添加選擇器作爲第二個參數使其成爲_delegate_。 –

jQuery刪除父級onclick不適用於新元素

回答

相關問題