Why Alert Works Only On First Row?

I use Zebra Dialog and I'm trying to make an alert set off every time a Delete is clicked. The alert is only working when I click Delete in the first row. All rows below it does no

Solution 1:

Id's must be unique.That's creating problems here.So to make your code work make some small changes by changing it's to class.

change mark up to

<table><tr><td>Example1</td><td><aclass="delete"href="#">Delete</a></td></tr><td>Example1</td><td><aclass="delete"href="#">Delete</a></td></tr><td>Example1</td><td><aclass="delete"href="#">Delete</a></td></tr></table>

then in jquery

<script>
  $(document).ready(function(){
     $(".delete").bind("click",function(e){  <-----  class selector
     e.preventDefault();
     $.Zebra_Dialog("Do you want to delete?",{
      type:"question",
      title:"Question"
    })
    //  send an ajax request here based up on the user selection 

  });
});
</script>

If you are a beginner please go through the standard guide here.

Solution 2:

ID attribute of an element must be unique value in a document, In your case all the delete links has the same ID. If you have multiple elements sharing a common behavior then use a common class attribute to group them together.

<table><tr><td>Example1</td><td><aclass="delete"href="#"data-id="1">Delete</a></td></tr><tr><td>Example1</td><td><aclass="delete"href="#"data-id="2">Delete</a></td></tr><tr><td>Example1</td><td><aclass="delete"href="#"data-id="3">Delete</a></td></tr></table>

then

$(document).ready(function () {
    $(".delete").bind("click", function (e) {
        e.preventDefault();
        var $this = $(this);
        $.Zebra_Dialog("Do you want to delete?", {
            type: "question",
            title: "Question",
            buttons: ['Delete', 'Cancel'],
            onClose: function (caption) {
                if (caption == 'Delete') {
                    $.ajax({
                        url: 'delete.php',
                        data: {
                            id: $this.data('id')
                        }
                    }).done(function(){
                        $this.closest('tr').remove();
                    }).fail(function(){
                        alert('there was an error while deleting the record')
                    })
                    //code required to delete the record from server goes in here
                }
            }
        })
    });
});

Demo: Fiddle