Jean Pierre Jean Pierre - 1 month ago 9
PHP Question

updating page with jquery renders javascript function useless?

I have this page where the user select an item and a php file will return a table with a few buttons on each cell but when I click on it the js function is not called.

this is the js function

$('#deleteRow').on('click',function(evt)
{
console.log('triggered');

}
);


This is the php echo

echo "
<tr>
<td>$name</td>
<td>$startData $startTime</td>
<td>$endDate $endTime</td>
<td id='action-buttons'><button type='button' class='btn btn-primary pull-right' id='deleteRow' ><i class='glyphicon glyphicon-trash'></i> </button></td>
<td id='action-buttons'><button class='btn btn-primary pull-right' data-toggle='modal' data-target='#myModal'><i class='glyphicon glyphicon-edit'></i> </button></td>
<td><label id='1'><input id='check' type='checkbox' name='switch' class='checkbox' $activeBool /><div class='switch' ></div></label></td>
</tr>


";


and this is the way I place it on the page (this is the success function fo the ajax post)

success: function(result){
$('#content-table tbody').html(result);

}
});


I have no idea why this is happening.

Answer

You are registering the click event on something that doesn't exists yet.

Try this:

$(document.body).on('click','#deleteRow',function(evt)
{
    console.log('triggered');
});

Update:

As ratiorick mentioned, if you have a same id name and you want to get the handle of the one that you actually clicked, you can do something like this:

$(document.body).on('click','button[id^=delete]',function(evt)
{
    console.log('triggered');
});

'button[id^=delete]' basically says that every button whose id stars with delete.

Comments