Ajax question?

Question

JavaScript

There is this code:

$(document).ready(function() {

$('#add').click(function() {
if($('#group').val()==='')
{
alert('Enter a title!');
return false;
}
var group=$('#group').val();

$.ajax({
type:"get",
url:"addGroup.php?data="+ group,
datatype:"html",
success:function(response){
$('#groups').append(response);
$('#group').val("");
},
error:function (xhr, ajaxOptions, thrownError){
//display the error
alert(thrownError);
}

});
});

$('.del').click(function(){
var buttonId=this.id;
$.ajax({
type:"get",
url:"delGroup.php?id="+buttonId,
datatype:"html",
success:function(){
$("#cont"+buttonId).fadeOut(200) ;
},

});

});
});

The first request adds an element in which there is a delete button, the second request is just tied to this button. But when the element is generated and when the delete button is clicked, the second request does not work, if the page is reloaded, the delete button works fine. Where could be the problem?

Answer 1

Look at .on and .delegate

Answer 2

did with on, thanks!