binding functions with objects to jQuery 'change' event handler

Question

When you specify a function (with or without parameters) in the DOM via onChange, you are limited to static paramters. E.g.

<select id="blah" onChange="doSomething(3);">

However, jQuery lets you dynamically define and assign functions to event handlers, such as 'change'.

See the example below:

function addRow(customObject) {
  << Create TR containing a select named "#someSelect + customObject.id" >>

  // Demo
  $("#someSelect" + customObject.id).change(function() {
    changeSomething(customObject)
  });
}

My question is - essentially - will this work? I am using a specific instance o f an object in my jQuery change event handler. Will that particular instance of customObject (wherever it lies) always be bound to this event handler callback?

customObject is initialized at load, and is one of many. For that particular select box, I always want it to be linked to that object.

New to jQuery. Thanks in advance.

EDIT:

I have several rows of items. Each is represented by an object. I just want to make sure that when someone modifies one of the rows via HTML, that the underlying object (bound to the callback function) is properly updated.

I am looking for something like this, conceptually a mapping between:

Row 1 - customObject1
Row 2 - customObject2
Row 3 - customObject3

... such that if I modify one of the HTML elements (e.g. change the select box) in row 3, that behind the scenes, customObject3 is modified

It will work. You just need to be sure to write your object's id's (i.e. write all your html) before to run that script. You'll probably need to run that script at the end, not in the header. — celerno
– celerno, Commented Jun 18, 2014 at 20:17
When you say "in the DOM", it's actually in the HTML which gets converted to a handler in the DOM, and you can reference global variables. They don't need to be static values. — cookie monster
– cookie monster, Commented Jun 18, 2014 at 20:18
if customObject.id equals (for instance) 2 and you have an element with id someSelect2, then yes, it will "work". But I'm not sure it will do what you're expecting, as I can't really make out what exactly it is that you're ultimately trying to accomplish here. — Patrick Q
– Patrick Q, Commented Jun 18, 2014 at 20:19
"Will that particular instance of customObject (wherever it lies) always be bound to this event handler callback?" The instance itself won't be bound. The function references the variable, so it'll get whatever instance happens to be assigned to that variable when the handler runs. — cookie monster
– cookie monster, Commented Jun 18, 2014 at 20:21

Jakub Kotrs · Accepted Answer · 2014-06-18 20:38:27Z

1

What you have will work in case customObject.id is defined before adding the listener and you intent the listener itself to be bound to that specific element without moving it around.

From your question I understand that customObject.id is dynamic as in can change its value and depending on this value, the listener can listen on different element. In this case, you'd have to use a bit more general selector and check the value inside the listener itself:

$('select').on('change', function(e) {
    if(this.id === 'someSelect' + customObject.id)
        return myCallback(e);
});

Edit:

The problem lies in accessing the customObject inside the listener. It uses the current content, not the content it used to have when you added the listener.

Easiest solustion I know is:

var select = $("#someSelect" + customObject.id);
select.customObject = customObject; /* save customObject to the select itself */
select.on('change', function() {
    changeSomething(this.customObject); /* don't use global object but its own */
});

edited Jun 18, 2014 at 20:38

answered Jun 18, 2014 at 20:21

Jakub Kotrs

6,2841 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

NewToMS Over a year ago

the ID never changes. It represents the ID of an object. Each row has an underlying object. I just want to make sure that when someone modifies the HTML, that the correct instance of the underlying object is acted upon

Jakub Kotrs Over a year ago

Well, if it doesn't change, it isn't dynamic and you can set it like $('#someSelectID'), no?

NewToMS Over a year ago

That isn't what I am worried about

Jakub Kotrs Over a year ago

Oh dear, what are you worried about, then?

Jakub Kotrs Over a year ago

Well, judging by how you modified your question you haven't even tried it! Because you would find out you had it right from the start. When you bind a listener to an element, it stays bound to that element until you remove it, it can't move itself.

|

Collectives™ on Stack Overflow

binding functions with objects to jQuery 'change' event handler

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related