{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 【Aperson】 的问题《Click event is not firing after DOM changes in jQ》','https://www.manongdao.com/q-824786.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am trying to code ADD & DELETE button in HTML page to delete or add images code in the page. The DELETE button will delete the first image before the button. The ADD button will insert a new image to HTML page and the delete button to the image.
The code works fine: it deletes the image when DELETE button is clicked and it inserts the image when ADD button is clicked. The problem is: the delete button that inserted after ADD button is clicked is not working. So if you click on ADD button and then click on DELETE button the image will not hide; the click event is not firing.
Here is the code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.img-post input').after('<button type="button" >Delete</button>');
$(".img-post button").click(function() {
$(this).prev().prev().remove();
$(this).prev().remove();
$(this).remove();
});
$(".add-img button").click(function() {
$('<img src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
});
});
</script>
</head>
<body>
<div class="img-post">
<img src="image1.jpg" /><input type="hidden" name="allimages[]" value="image1.jpg" /><br />
<img src="image2.jpg" /><input type="hidden" name="allimages[]" value="image2.jpg" /><br />
</div>
<div class="add-img">
<button type="button" >Add image</button>
</div>
</body>
</html>
You have to change your
.click(fn)handlers to.live("click", fn). Your.click()handlers only work with elements that are in the page at document.ready time. The elements you add dynamically were not present then so they have no click handlers..live(), on the other hand, looks at clicks at the top level and then examines them to see if they are clicked on a matching object and WILL work with objects that are dynamically added to the page after your initialization code runs..live()only works with some events (events that bubble), but click is one of them that it does work with.Use
liveinstead:Try using the jQuery
livefunction. This will bind the click handler to elements that match your selector, even if they don't exist in the DOM when your page initially loads (which is the case in your example).Bind the event handler to the button's click event using
live()instead ofclick():This will ensure that all buttons which match your selector which are added after the initial DOM load will also fire the same function.
http://api.jquery.com/live/