Question

This is more of an educational question rather than a problem to be solved.

So I’ve got an input which is styled using Ryan Fait’s custom elements plugin.

<input type="checkbox" class="styled" id="no-favourite" />

I bound a jQuery change() handler:

$("#no-favourite").change(function(){
    console.log("changed"); 
});

and edited the custom elements plugin’s check method to include:

try{
    element.onchange(); 
}catch(err){
    console.log(err);
}

This didn’t work. I expected a console.log of “changed”, and at worst a console.log error, although received neither. The jQuery change handler gets called when clicking on the associated label.

I solved the problem by using:

$(element).change();

So I am wondering, why does jQuery not pick up a programmatic call to element.onchange() ?

Answer 1

Assuming element is a DOM element (if it were a jQuery element it would just blow up), you are attempting to invoke the element’s property onchange.

When you bind an event handler through jQuery, it does not add any onchange properties – these would only exist if you bound the handler inline (in markup) or through native javascript.