JQuery將click事件綁定到帶有參數的附加元素

Question

我正在嘗試使用一些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!");
}

Answer 1

一個問題是變量i將始終是最后一個鏈接的變量，因為當用戶單擊任何鏈接時，循環將完成。 解決此問題的一種方法是使用.data()方法將一條信息與每個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() （如問題和此答案的原始版本）。

Answer 2

首先，我在這里做一個假設：

• 你想要點擊功能中的電子郵件的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>

然后，使用存儲的數據，我們可以將單個處理器的#mail-in-inbox集裝箱一次 （在DOM就緒），而不是一個給每個 <a>這個函數每次運行時，它應該是這樣的：

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

這將顯示"Button 0 clicked!" ， "Button 12 clicked"等。 您可以在此處的演示中測試以上所有內容 。

Answer 3

有幾個問題。

首先，這不是你如何使用.live() 。 針對給定選擇器的jQuery對象調用.live()方法。 您可以在任何時候（甚至在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值。

Answer 4

LoadMailById(i);

i是這里的參考，並在每次迭代時增加。 因此，在for循環之后它保持大小的值; 4。

Answer 5

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

我認為這應該可以解決問題。 匿名函數接受你的參數i並將其綁定到變量索引，這樣當單擊甚至發生時，它不使用循環結束時的剩余值，而是在綁定時使用它的值。