Question

i have one table dom element

<table id='acc001'>...</table>

and i create one popup menu to get tr data after clicking on that tr element

  var tr = $('<tr>').appendTo('#acc001');
  popupMenu.draw_menu(tr);

  var popupMenu = {
    menu : [
      {'string':'add data','type':'input','callback':function(tr){console.log(tr);}},
      {'string':'edit data','type':'input','callback':function(tr){console.log(tr);}}
    ],
    draw_menu : function(tr){
        for(i in this.menu)
        {
          var div = $('<div>',{'text':this.menu[i].string}).appendTo('#infoDiv');
          $(div).bind('click',this.menu[i].callback); // i cannot send param for this callback
        }
    }
  }

the problem is after create the menu but i cannot get tr content after clicking them.
all console.log cannot show that ..

1. so how to add and send param for this callback?
2. any other way to do this code properly?

Answer 1

Wrap it in a function and pass tr to the callback:

$(div).bind('click',(function(callback) {
    return function() { callback(tr) }
})(this.menu[i].callback));

(Edited: this would not be from proper context inside the event handler; fixed again)