CODEWITHSUNDEEP
javascriptjquery
Jeff Reddy
Jeff Reddy

Reputation: 5670

jquery link not working when added client side

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>

Upvotes: 1

Views: 222

Answers (2)

adeneo
adeneo

Reputation: 318182

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!

Upvotes: 3

dgvid
dgvid

Reputation: 26633

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');
    });
});

Upvotes: 3

Related Questions