1

I've got the following link in my page,

<a href="#dialog" name="delete" data-id="75351" id="delete-75351"  >Delete</a>

In my page script, I've defined the following.

    $(document).ready(function () {
        $('a[name=delete]').click(function (e) {
            alert('Delete Clicked');
        });
    });

My links all work fine using this. However, there are times when I need to dynamically add a link. I use this jquery to add the link to a cell in a table.

var actionCell = $('#itemlist').find(rowId).find(actionCellId);

$('<a>Edit</a>').attr({ 'id': 'edit-' + response.id, 'href': '/Item/Edit/' + response.id }).appendTo(actionCell);

//This line doesn't work. Doesn't get registered with JQuery
$('<a name="delete">Delete</a>').attr({'id':'delete-' + response.id, 'href':'#dialog','data-id':response.id}).appendTo(actionCell);

So here I add two links. The Edit link calls a method on my MVC3 Controller. The second one, Delete, needs to function like the others and have it's click event handled in the jquery function found at the top of this post.

Both the links are created the way they should, and the Edit link works, but the delete link's click event is never handled by my javascript method.

UPDATE

I applied the solution suggested here, but it's not working. My jquery now looks like this.

 $(document).ready(function () {
    //select all the a tag with name equal to reject
    $('a[name=delete]').on('click', function (e) {
        alert('Delete Clicked');
    });
 });

I did notice though a difference in the link I added and the identical links added at page load.

Here is the link I added via jquery

 <a name="delete" id="delete-75641" href="#dialog" data-id="75641">

Here is a link added when the page loaded.

 <a name="delete" id="delete-75642" href="#dialog" data-id="75642" jQuery17008581920570114187="3">

What is the jQuery17008581920570114187="3" ??

Here is how I define the link in my page. (Actually a view using MVC3 and Razor)

 <a href="#dialog" name="delete" data-id="@item.ItemID" id="[email protected]"  >Delete</a>

2 Answers 2

3

The click method only binds a click event handler to elements that exist at the time you call the click method. Try the on or live method, instead.

For example, if you are using jQuery 1.3.x - 1.6.x, use the deprecated method live:

$(document).ready(function () {
    $('a[name=delete]').live('click', function (e) {
        alert('Delete Clicked');
    });
});

If you are using jQuery 1.7 or later, use the new on method:

$(document).ready(function () {
    $('body').on('click', 'a[name=delete]', function (e) {
        alert('Delete Clicked');
    });
});
4
  • 2
    From the jquery docs: As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). See also: andismith.com/blog/2011/11/on-and-off
    – jk.
    Dec 8, 2011 at 20:47
  • I've added the code per your solution but it isn't working. Any thoughts? See my question 'Edit' where I've updated it. Thanks
    – Jeff Reddy
    Dec 9, 2011 at 14:35
  • Oops. I just demonstrated how to reproduce the exact same error, but with the newer .on method! Sorry about that. I have updated the example, so see if that works. The change is to call .on() on the body (or really any element that contains all of your a links), then pass the a[name=delete] selector as the second argument to .on().
    – dgvid
    Dec 9, 2011 at 14:52
  • Thanks, works now. I used body. I'll see if I can't change it to use either my table, or even cell the links are contained in.
    – Jeff Reddy
    Dec 9, 2011 at 14:59
3

If using jQuery 1.7+ replace the click event with the on() method.

$(document).on('click', 'a[name=test2]', function (e) {
    alert('Delete Clicked');
});

EDITED: per dgvid comment!

2
  • This contains the same mistake as my original answer. The selector must be passed as the second argument to .on() to work on elements added to the DOM after the call to .on().
    – dgvid
    Dec 9, 2011 at 14:54
  • Yes, you are indees right. To create delegated events the selector must be in the second argument and bubbles up to the main selector. Would'nt it be great if there was a site where all this was documented, so when someone had trouble figuring jQuery stuff out they could just go to that site and find documentation on what the different functions and methods do....ohh wait ?
    – adeneo
    Dec 9, 2011 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.