JQuery 将单击事件绑定到带有参数的附加元素答案

【问题标题】：JQuery Bind click event to appended element with an argumentJQuery 将单击事件绑定到带有参数的附加元素
【发布时间】：2011-06-02 09:34:11
【问题描述】：

我正在尝试使用一些 li 元素填充 ul 列表，并为每个 li 元素提供一个链接，该链接使用不同的参数调用相同的函数。但是它似乎不起作用，我附上了下面的代码，在文件加载时调用 CheckForNewMail。谁能帮帮我？

function CheckForNewMail() {
    //////////////////////////////////////////////////////////////////
    // This will be dynamic
    MailInInbox[0] = new Array("0", "Mail One");
    MailInInbox[1] = new Array("12", "Mail Two");
    MailInInbox[2] = new Array("32", "Mail Three");
    MailInInbox[3] = new Array("5", "Mail Four");
    //////////////////////////////////////////////////////////////////////
    $('#mail-in-inbox').children().remove();

    size = 4; element = $('#mail-in-inbox');
    for(i = 0; i < size; ++i) {
        var link = $('<a href="#" class="inbox-link">'+ MailInInbox[i][1] +'</a>');
        link.live('click', function() {
            LoadMailById(i);
        });
        li = $('<li></li>');
        li.append(link);
        element.append(li);     
    }
}

function LoadMailById(id) {
    alert("Button "+ id +" clicked!");
}

【问题讨论】：

标签： javascript jquery append bind

【解决方案1】：

首先，我在这里做一个假设：

您希望在该点击功能中使用电子邮件的id，而不是索引，例如0, 12, 32, 5，而不是0, 1, 2, 3。

鉴于此（如果假设不正确，可以使用 .index() 轻松调整），您可以这样做：

function CheckForNewMail() {
    MailInInbox[0] = ["0", "Mail One"];
    MailInInbox[1] = ["12", "Mail Two"];
    MailInInbox[2] = ["32", "Mail Three"];
    MailInInbox[3] = ["5", "Mail Four"];
    $('#mail-in-inbox').empty();

    var size = 4, element = $('#mail-in-inbox');
    for(i = 0; i < size; ++i) {
      $('<a href="#" class="inbox-link">'+ MailInInbox[i][1] +'</a>')
        .data('id', MailInInbox[i][0]).wrap('<li/>').parent().appendTo(element);
    }
}

这里有一些变化：

数组字面量，更简单的表示法
对变量进行正确的var 声明（如果它们尚未在其他地方定义）
使用.data() 将id 存储在我们刚刚创建的<a> 上

然后，使用存储的数据，我们可以将 single 处理程序附加到 #mail-in-inbox 容器 one 时间（在 DOM 准备好时），而不是一个到 each <a> 每次这个函数运行时，它应该是这样的：

$('#mail-in-inbox').delegate('.inbox-link', 'click', function() {
  alert("Button "+ $.data(this, 'id') +" clicked!");
});

这将显示"Button 0 clicked!"、"Button 12 clicked" 等You can test out all of the above in a demo here。

【讨论】：

【解决方案2】：

一个问题是变量i 将始终是最后一个链接的变量，因为当用户单击任何链接时，循环已经完成。解决此问题的一种方法是使用.data() method 将一条信息与每个li 元素相关联：

link.data('mailId', i); // within the loop

然后您可以为#mail-in-inbox 内的所有收件箱链接绑定一个事件处理程序：

$('#mail-in-inbox').on('click', '.inbox-link', function() {
    LoadMailById($(this).data('mailId'));
});

编辑添加：.on() 在 jQuery 1.7 中引入。如果您使用的是 jQuery 1.6 或更早版本，请改用 .delegate() 或 .live()（如问题和此答案的原始版本中所示）。

【讨论】：

【解决方案3】：

有几个问题。

首先，这不是您使用.live() 的方式。 .live() 方法是针对给定选择器的 jQuery 对象调用的。您可以在任何时候执行此操作（甚至在 DOM 加载之前），并且页面上与选择器匹配的任何点击都将触发处理程序。

在你的情况下，它会是这样的：

$('.inbox-link').live('click',function() {
   // whatever
});

在您为每个项目分配单独的处理程序的情况下，您将使用.bind 而不是live()。

正如另一位用户所提到的，尽管您在处理程序中没有正确的 i 值。你可以使用$.each() 来解决这个问题。

$.each(MailInInbox, function( i ) {
    var link = $('<a href="#" class="inbox-link">'+ MailInInbox[i][1] +'</a>');
    link.bind('click', function() {
        LoadMailById(i);
    });
    $('<li></li>').append( link ).appendTo( element );     
});

现在您将在每个 link 的处理程序中拥有正确的 i 值。

【讨论】：

【解决方案4】：

LoadMailById(i);

i 在这里是一个参考，并在每次 for 迭代中增加。因此，在 for 循环之后，它保存了 size 的值； 4.

【讨论】：

【解决方案5】：

   link.live('click', (function(index) {
        return function() { 
            LoadMailById(index);
        };
      )(i);
    });

我认为这应该可以解决问题。匿名函数接受您的参数 i 并将其绑定到变量索引，这样即使发生点击，它也不会使用循环结束时剩余的值 i，而是使用绑定时的值。

【讨论】：