CODEWITHSUNDEEP
javascriptjquerydatatable
Nikos
Nikos

Reputation: 15

Datatables, click(function) and on(submit) don't work after 1st page

I use the following code to manage records (edit and delete photos). I am using datatables, but after the 1st page, js doesn't work.

html

    <td align="center">
      <a id="129" class="photo-edit-link" href="#" title="Edit Photo"><i class="fa fa-pencil fa-lg"></i></a>
    </td>
    <td align="center">
      <a id="129" class="photo-delete-link" href="#" title="Delete photo"><i class="fa fa-trash fa-lg text-danger"></i></a>
    </td>

js script

/* Photo Edit */
$(".photo-edit-link").click(function()
{
    var id = $(this).attr("id");
    var photo_id = id;
        $(".content-loader").fadeOut('slow', function()
         {
            $(".content-loader").fadeIn('slow');
            $(".content-loader").load('photo_edit_form.php?photo_id='+photo_id);
        });
    return false;
});
/* Photo Edit */


/* Photo Delete */
$(".photo-delete-link").click(function()
{
    var id = $(this).attr("id");
    var del_id = id;
    var parent = $(this).parent("td").parent("tr");
    if(confirm('Delete photo with ID = ' +del_id))
    {
        $.post('photo_delete.php', {'del_id':del_id}, function(data)
        {
            parent.fadeOut('slow');
        });
    }
    return false;
});
/* Photo Delete */

Any suggetions? Thank you

Upvotes: 1

Views: 105

Answers (1)

Alex Mac
Alex Mac

Reputation: 2993

Try below mentioned solution.

/* Photo Edit */
$(document).on('click','.photo-edit-link',function()
{
    var id = $(this).attr("id");
    var photo_id = id;
        $(".content-loader").fadeOut('slow', function()
         {
            $(".content-loader").fadeIn('slow');
            $(".content-loader").load('photo_edit_form.php?photo_id='+photo_id);
        });
    return false;
});
/* Photo Edit */


/* Photo Delete */
$(document).on('click','.photo-delete-link',function()
{
    var id = $(this).attr("id");
    var del_id = id;
    var parent = $(this).parent("td").parent("tr");
    if(confirm('Delete photo with ID = ' +del_id))
    {
        $.post('photo_delete.php', {'del_id':del_id}, function(data)
        {
            parent.fadeOut('slow');
        });
    }
    return false;
});

Let me know if it not works for you.

Upvotes: 2

Related Questions