JQuery Bind click event to added element with argument

Question

I am trying to populate the ul list with some li elements and give each li element a link that calls the same function with a different argument. However, it does not seem to work, I added the code below, CheckForNewMail is called when the document is loaded. Can anyone help me out?

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

One of the problems is that the variable iwill always belong to the last link, because by the time the user clicks on any link, the cycle will be completed. One way to fix this would be to use a method .data()to associate a piece of information with each element 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(). .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 );     
});

i link.

Answer 4

LoadMailById(i);

i . , for ; 4.

Answer 5

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

, . , , , i, , .