Passing Parameters to jQuery Delete Button Click EventHandler

Question

I have the following jQuery

$('#btnDelete').click( function() {//Do the delete here via jquery post});

In my table I have numerous rows with the following

<a id="btnDelete">Delete</a>

How I do I pass parameters to the click event to post an ID to delete something

Answer 1

You could use this wrapped in jQuery function. Inside your callback:

$(this)

will be a wrapped set containing the a tag that trigger the event. For example if, you have this structure:

<tr><td><a id="btnDelete">Delete</a></td></tr>

$(this).parent()

will contain the parent td element. You can then use its id or attributes. This is much better than trying to pass parameters to the callback.

Answer 2

If you have many of these, the easiest way to tie a handler to them all is to have them all share a common class rather than a common ID (id's should be unique...).

<a class="btnDelete" id="del_123">Delete</a>
<a class="btnDelete" id="del_124">Delete</a>
<a class="btnDelete" id="del_125">Delete</a>

Then to activate them, you can bind a click event:

$(function() {
    $(".btnDelete").click(function() {
        // get your id here
        var $id = parseInt(this.id.substring(4));
        // POST with your info or whatever... and then...

        return false;
    });
});