I'm dynamiccly loading rows into table, and at the end of every table there're actions for that row, like edit, hide, delete...
When I load page I run on DOM ready function, for example like this for edit:
function editPostButtonEvent()
{
$('a.edit').on('click',function(event){
event.preventDefault();
//ziskanie id kategorie
id = $(this).data('id');
clicked = $(this);
//ajax
$.ajax({
url: domainName+'admin/cmspost/ajax_edit_post',
type: 'POST',
dataType: 'html',
data: { id: id },
success : function(data)
{
postEdit(data);
}
});
});
}
the problem is, that it's working on loaded elements when DOM was loaded, but after I add few of them with ajax, it's not working at all. I believe that the event's are not attached to them.
I know I run the function after every change in DOM, but problem is with plugin which dont have on success event. I read that there's delegate function which is deprecated and now there's .on function but it isn't working for added eleements.
Can someone help me? Is is possible to add event to all, even not existing elements?
You can use event delegation for dynamically added elements:
$('body').on('click', 'a.edit', function(event){
// Your code here
})