CODEWITHSUNDEEP
jquerydomjquery-eventsdynamic-function
HES_Xenon
HES_Xenon

Reputation: 103

jQuery add method to object, then trigger event on it

Consider following situation:
I have a jQuery Object, $wrapper = $(this);. This happens in a init call, like this $('#unique-wrapper-id').initWrapper()'. As you can already imagine initWrapper() is a function in jQuery.fn.

Now, still in the initWrapper() call I add a function to $wrapper like this

$wrapper.getValue = function() { /* typical wrapper function */}

and then, in a callback which is executed upon clicking on an element within the wrapper I call $wrapper.trigger('change'). On the other end I listen to the regular jQuery change event and here's where it doesn't work out anymore.

$('#unique-wrapper-id').change(function() {
    var $wrapper = $(this);
    $wrapper.getValue(); // $wrapper.getValue() is not a function
});

Ok, so somewhere in the jQuery change event process getValue() gets lost. No problem, I'll just attach it to the DOMElement itself in the init call with

$wrapper[0].getValue = function { /* typical wrapper function */ }

This works as expected and I can execute the getValue() method on the DOMElement behind the jQuery Object on the listening end.

However, there are two things that bug me:

Upvotes: -1

Views: 440

Answers (1)

guest271314
guest271314

Reputation: 1

If $wrapper is the same element you should be able to store getValue within .data()

var getValue = function() { /* typical wrapper function */};
$wrapper.data("getValue", getValue);

$("#unique-wrapper-id").change(function() {
    var $wrapper = $(this);
    $wrapper.data().getValue();
});

Upvotes: 1

Related Questions