Passing event data to jQuery live handler

I ran into a problem when I try to pass event data to jQuery live function. Basically, I have a table generated with many rows and each row data is encapsulated by an object, let's just call is "tbRow". I'd like register a live function on each row, and when you click on it, it will act differently based on the row data. The way I am structuring the code is as follows:

MYAPP.prototype.actions = function (tbRow) {
   var output = "<div class="select"><a href="#"> Select this row </a></div>"
   $('div.select').live('click', {tbRow: tbRow}, function() {
       console.log(e.data.tbRow.id + "is selected");
       /// do something else
   });
   return output;
};

The output returned by this function is used to construct the actual table, and at the same time, a live function is registered for that row to respond to the click action. The print for id (assuming each row has a unique ID) is just for checking I am selecting the right row.

The problem I ran into is that every row I select now carry the ID of F开发者_如何学CIRST row, it appears only the first one gets registered properly. One way I can think of to resolve it is, to make a concatenated string with row ID, such that:

$('div.select_RowID1").live( .... )

However, I am not sure if this will work or right approach.

Thanks in advance for help.

Oliver

I think you may be using jQuery live in a way that is making it more difficult than necessary. You can just do this:

$('table.live tr').live('click', function(evt){
    console.log($(this));
});

Here I have added a 'live' class to the table. This binds the click event to all current and all future 'tr' elements. The $(this) and evt parameter will tell you which row was clicked.

Here is a jsfiddle demonstrating this: http://jsfiddle.net/rcravens/yyekt/

Hope this helps.

Bob

The way you are using live will cause multiple click events to be bound to each div.select. One each for the number of times you call the function.

Try this. It uses the jQuery index() function to retrieve the index of the row relative to the other rows.

$('div.select').live('click',
  function() {   
    console.log( $(this).index() + " is selected");
   /// do something else
});

function makerow(tbRow) {
   var output = '<div class="select"><a href="#"> Select this row </a></div>'

   return output;
};

http://jsfiddle.net/ChrisMH/mLW6R/1/

Edit: Updated example

function makerow(tbRow) {
   var output = '<div id="select' + tbRow.id + '" class="select"><a href="#"> Select this row </a></div>'
   $( "#body" ).append( output );
   $( "div.select#select" + tbRow.id )
       .bind( 'click',
              function() {
                  console.log( tbRow.id );
              }
            );
};

http://jsfiddle.net/ChrisMH/UF4tD/1/