jQuery dynamic event binding

Question

I think this is a pretty basic question, but I'm struggling with this problem.

On my form I have an option to dynamically add a new row to the table, which is simple enough to do with jQuery. On one of the elements, I need to bind an event, also relatively straightforward. The part I'm having problems with is the event that needs to be bound has to take a parameter. So, the code I've got:

$(newrow).find("select").each(function () {
  var ochange = function(handle){
    var thisselect = "select" + handle;
    var thislink = "link" + handle;
    var thiscollate = "collate" + handle;
    if(document.getElementById(thisselect).value == 4){
     document.getElementById(thislink).style.visibility = 'visible';
    }
    else{
     document.getElementById(thislink).style.visibility = 'hidden';
     document.getElementById(thiscollate).value = "";
    }
  };
  $(this).change(ochange);
  $(this).attr("name", "select" + numfields);
  $(this).attr("id", "select" + numfields);
 });

The event binds as expected, but the "handle" variable doesn't register (of course because I'm pretty sure this is incorrect syntax). Also, this function that I want to bind to the dynamic form element is actually already defined, so if there is a way I can call an already-defined function (that takes a parameter) I'd love to hear about it.

Answer 1

In your code, 'handle' variable is a jQuery object, representing event for 'select' widget changing. If you want to get DOM object which fired this event, use handle.target attribute. For instance to get its name, use handle.target attribute. To get jQuery object for target - $(handle.target).

Full reference for Event objects is here

Answer 2

The first parameter of an event handler function is the event object.

If I understand correctly, basically you want to pass a value to the ochange function.

You could declare the variable handle in the scope of the each callback function, and use its value on the ochange function, since you have jQuery, you could use it in that function, and avoid the getElementById calls:

$(newrow).find("select").each(function () {

  var handle = "someValue"; // this variable will be accessible inside ochange

  var ochange = function(){
    var thisselect = "select" + handle;
    var thislink = "link" + handle;
    var thiscollate = "collate" + handle;
    if($(thisselect).val() == 4){
      $(thislink).css('visibility', 'visible');
    }
    else{
      $(thislink).css('visibility', 'hidden');
      $(thiscollate).val('');
    }
  };

  $(this).change(ochange);
  $(this).attr("name", "select" + numfields);
  $(this).attr("id", "select" + numfields);
});

Answer 3

You could supply a "helper" function:

 $(this).change( function (evt)  {
    ochange('someVal')
  });

Another option which is kind of complex but simple at the same time is the jquery.hitch plugin (which something of the sort is going into jQuery 1.3.3?)

With it you could do something like this:

  var obj = {
     attr: "blah",
     myFunc: function(arg){
       console.log(this.attr + " " + arg);
     }
  }
  $(this).change( $.hitch( obj, "myFunc", "wheee") )

Answer 4

Thank you all for the replies. I have it working now thanks to your suggestions!