Question

我的页面中有以下链接，

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

在我的页面脚本中，我定义了以下内容。

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

我的链接使用此工作正常。但是，有时我需要动态添加链接。我使用此jquery将链接添加到表中的单元格。

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

所以我在这里添加了两个链接。 Edit链接调用我的MVC3控制器上的方法。第二个，删除，需要像其他人一样运行，并在本文顶部的jquery函数中处理它的click事件。

这两个链接都是以它们应该的方式创建的，并且编辑链接可以正常工作，但删除链接的点击事件永远不会被我的javascript方法处理。

更新

我应用了此处建议的解决方案，但它无效。我的jquery现在看起来像这样。

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

我注意到我添加的链接与页面加载时添加的相同链接存在差异。

这是我通过jquery添加的链接

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

这是加载页面时添加的链接。

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

什么是jQuery17008581920570114187 =“3”??

以下是我在页面中定义链接的方法。（实际上是使用MVC3和Razor的视图）

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

Answer 1

click方法仅将单击事件处理程序绑定到调用click方法时存在的元素。请改用on或live方法。

例如，如果您使用的是jQuery 1.3.x - 1.6.x，请使用弃用的方法live：

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

如果您使用的是jQuery 1.7或更高版本，请使用新的on方法：

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

Answer 2

如果使用jQuery 1.7+，则使用on（）方法替换click事件。

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

已编辑：每dgvid评论！

添加客户端时jquery链接无法正常工作

2 个答案: