html button click event [duplicate] - html

Question

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 11 months ago.
I created a div as defined below
<div class="area1">
</div>
With this ajax call I changed the html for above div
$('#abutton').click(function(e) {
e.preventDefault();
$.ajax({
url: 'do',
type: 'POST',
dataType: 'json',
cache: false,
data: {id:this.id},
success: function(data) {
$('.area1').html(data);
},
failure: function() {
alert('Please try again..!');
}
});
});
now div content looks like this
<div class="area1">
<input type="text" placeholder='Name'>
<button id='submit'>Submit</button>
</div>
Now I want to perform some action on button click
$('.area1 button').click(function(e){
e.preventDefault();
alert(this.id) ;
});
but this second ajax is not selecting the button
Can anyone tell the correct method

Answer 1

$(document).on("click","div.area1 button",function(e) {
e.preventDefault();
alert(this.id) ;
});
you can try this
if your page was dynamically creating elements dosomething you would bind the event to a parent which already exists (this is the nub of the problem here, you need something that exists to bind to, don't bind to the dynamic content), this can be (and the easiest option) is document.