-1

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:

  • Why does getValue() on the jQuery object get lost during the change event process?
  • Why doesn't the jQuery constructor (var $wrapper = $(this);) copy the getValue() function of the DOMElement into the jQuery Object?
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
HES_Xenon
  • 103
  • 1
  • 1
  • 8
  • Every time you call `$(element)` it creates a **new** jQuery object that wraps the DOM element. So properties you added to the original jQuery object are lost. – Barmar Mar 22 '16 at 21:31
  • @Barmar Good point. If `$wrapper` : `$('#unique-wrapper-id')` is defined before `.change()` event, should be able to use `$wrapper` within handler without calling `jQuery()` again. Could also possibly adjust to event delegation `$(document).on("change", '#unique-wrapper-id')` or `$wrapper.change(handler)` then `$(this).data().getValue()` inside of `handler` – guest271314 Mar 22 '16 at 21:44
  • Yes, you can do that. But it doesn't scale to multiple elements. – Barmar Mar 22 '16 at 21:46
  • @Barmar weeell... that sorta makes sense :/ should have thought of that. – HES_Xenon Mar 22 '16 at 21:59
  • @guest271314 it is defined before the change event, but in a different function context. Could you elaborate the other approach with event delegation a bit more? – HES_Xenon Mar 22 '16 at 22:01
  • Event delegation is unrelated to this problem. – Barmar Mar 22 '16 at 22:03

1 Answers1

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();
});
guest271314
  • 1
  • 15
  • 104
  • 177
  • thanks, I'll try that tomorrow, however that is just as intuitive to me as the workaround with adding the function to the DomElement.. but good poing, completely forgot about data. – HES_Xenon Mar 22 '16 at 21:58