I am using ajax using jquery, I am deleting a row using the following code snippet:

$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{

     alert("Hello World!")
}

});

When I click grid view show button, grid view appears without page refreshing due to ajax. If I click grid view show button more than one time, it refresh again grid view area, accordingly. But confirm box show more than one time,which is equal to my no. of clicks on grid-view show button, when I click on a single row delete button.

How can avoid this !

Edited

HTML CODE:

<td><a class="delete" href="#" style="margin-left: 10px"><img src="images/delete-icon.png" width="16px" height="16px" /></a></td>

Edited

Complete Code Snippet:

$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
    $getCode = $(this).parent().parent().attr('id');
    var oTable = $('#example').dataTable();
    var index =oTable.fnGetPosition( document.getElementById($getCode) );

    $.post("DeleteDepartment", {
        depID:$getCode                   
    }, function(data) {
        if(data.result >0){
            var oTable = $('#example').dataTable();
            oTable.fnDeleteRow( index );
        }else{
            alert("Operation Fail");
        }
    });

}

});

I am using ajax using jquery, I am deleting a row using the following code snippet:

$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{

     alert("Hello World!")
}

});

When I click grid view show button, grid view appears without page refreshing due to ajax. If I click grid view show button more than one time, it refresh again grid view area, accordingly. But confirm box show more than one time,which is equal to my no. of clicks on grid-view show button, when I click on a single row delete button.

How can avoid this !

Edited

HTML CODE:

<td><a class="delete" href="#" style="margin-left: 10px"><img src="images/delete-icon.png" width="16px" height="16px" /></a></td>

Edited

Complete Code Snippet:

$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
    $getCode = $(this).parent().parent().attr('id');
    var oTable = $('#example').dataTable();
    var index =oTable.fnGetPosition( document.getElementById($getCode) );

    $.post("DeleteDepartment", {
        depID:$getCode                   
    }, function(data) {
        if(data.result >0){
            var oTable = $('#example').dataTable();
            oTable.fnDeleteRow( index );
        }else{
            alert("Operation Fail");
        }
    });

}

});

• javascript
• jquery
• ajax

Share Follow edited May 12, 2012 at 18:04 Both FM asked May 12, 2012 at 17:47 Both FMBoth FM 77011 gold badge1414 silver badges3333 bronze badges 2

• what jquery version are you using? – ltiong_dbl Commented May 12, 2012 at 18:06
• jQuery v1.7.1 @ltiong_sh – Both FM Commented May 12, 2012 at 18:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

$('#example a.delete').unbind('click').bind('click', function (e) {
     e.preventDefault();

     if (confirm("Are you sure you want to delete this row?"))
     {

        alert("Hello World!")
     }

});

You appear to be attaching multiple events to the button. Are you sure you're only calling live() ONCE, and once only? If you call it multiple times, you get multiple handlers.

(Of course, this is why I prefer to just use .onclick = function() {...} personally)

It looks like the code is written to do the confirm once for each click. If you want it to confirm only once you have to make the code remember that you already confirmed.

The row is not deleted until the server calls your success callback function. During that time you can keep clicking on the row and firing the click event.

You could set a variable or a property on the row when the user confirms and then check this variable each time they click. Only show the confirm message if the variable is not set.

Or you could change the state of the element you click, change its image, change style, set an attribute. You could both inform your code that it has been clicked and indicate to the user that the row is already marked for deletion.

Or you could try jquery's .one() method to attach the event.