![](/img/trans.png)
[英]jQuery - event handlers on a class where the elements are subsequently created by AJAX
[英]How to inherit event handlers upon removal of elements using class in jquery?
我有如下的HTML
<div id="parent_div">
<div class="child_div">
<p>clicked button 1</p>
<button id="button1">button1</button>
</div>
<div class="child_div">
<p>clicked button 2</p>
<button id="button2">button2</button>
</div>
</div>
<button id="remover">remove</button>
<script type="text/javascript">
$('#button1').click(function(event) {
$(this).prev().css('color','red');
});
$('#button2').click(function(event) {
$(this).prev().css('color','yellow');
});
var new_html = '<div class="child_div">\
<p>new button 1</p>\
<button id="button1">button1</button>\
</div>\
<div class="child_div">\
<p>new button 2</p>\
<button id="button2">button2</button>\
</div>\
<div class="child_div">\
<p>new button 3</p>\
<button id="button3">button3</button>\
</div>'
$('#remover').click(function(event) {
$('#parent_div').children().detach();
$('#parent_div').append(new_html);
});
</script>
在上面的代碼中,當單擊卸妝按鈕時,我希望parent_div為空,但我需要保留放置在它們上面的事件處理程序。 因為稍后,我添加了不同的html,但是具有之前放置事件的相同ID。 當我嘗試使用上述代碼執行此操作時,無論detach()或remove()還是emtpy()方法如何,事件都被掩埋。 在新元素上,我的點擊事件不起作用。 請幫我解決這個問題
檢查此工作代碼。
$().ready(function(){ $('#parent_div').on('click', '#button1', function (event) { $(this).prev().css('color', 'red'); }); $('#parent_div').on('click', '#button2', function (event) { $(this).prev().css('color', 'yellow'); }); $('#parent_div').on('click', '#button3', function (event) { $(this).prev().css('color', 'green'); }); var new_html = '<div class="child_div">\\ <p>new button 1</p>\\ <button id="button1">button1</button>\\ </div>\\ <div class="child_div">\\ <p>new button 2</p>\\ <button id="button2">button2</button>\\ </div>\\ <div class="child_div">\\ <p>new button 3</p>\\ <button id="button3">button3</button>\\ </div>' $('#remover').click(function (event) { $('#parent_div').children().detach(); $('#parent_div').append(new_html); }); });
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div id="parent_div"> <div class="child_div"> <p>clicked button 1</p> <button id="button1">button1</button> </div> <div class="child_div"> <p>clicked button 2</p> <button id="button2">button2</button> </div> </div> <button id="remover">remove</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.