Events bound inline / at runtime being automatically deleted on document load

Question

Code, again:

console.log( field.$el.on('keyup change', function() {

    console.log( field.$el.val().length );

    if( field.$el.val().length > 0 ) field.clearError();

}), $._data( field.$el[0], 'events' ) );

The element exists at time of binding. The events appear to bind according to $._data, but when typing in the input, nothing happens. No console output as expected, the function is not called, and no console errors. If I use element.addEventListener instead it works fine.

Any ideas why this is broken? Using jQuery 3.2.1.

Edit: After the page loads, running $._data( $('#input_creative_url')[0], 'events' ) from console on the element in question returns undefined rather than the same event output from the console at runtime. What would cause jQuery to clear its internal data for this element?

Edit 2: Rather than using $(document).ready(...), I have the code placed inline after the elements referenced by the code. I'm doing this for performance reasons - $(document).ready(...) takes too long to trigger. If I wrap the code in a $(document).ready(...) the code works fine. It appears that, in the original setup, jQuery is deleting the bound events on $(document).ready(...). Is there any way to prevent this?

Edit 3: If, in the original example, I prepend the code with jQuery.cleanData = function(){};, the code works fine. So jQuery.cleanData and/or its callee's are the culprit. Obviously, I can't just blow up jQuery's garbage collection to make my code work, but does anyone have any recommendations on where to go from here?

Edit 4: I figured it out. I was removing the element's parent from the DOM and re-inserting it elsewhere. I need to use detach() instead of remove().

1. Share code not a picture of it. 2. Is `field.$el` jQuery object — Satpal, Nov 27 '17 at 08:39
I suspect `field.$el` is a collection of elements. Use `$(this)` inside the handler and see if that changes anything. — Reinstate Monica Cellio, Nov 27 '17 at 08:43
`field.$el` is a singular jQuery object, as demonstrated by the console output — Dan, Nov 27 '17 at 08:43
Using `$(this)` didn't change anything. This is part of an application in development. Here's a jsFiddle which works as expected: https://jsfiddle.net/kfozs36u/ — Dan, Nov 27 '17 at 08:50
Please post a [MCVE] *in the question*, preferably in a snippet so it is runnable. — Reinstate Monica Cellio, Nov 27 '17 at 09:00
More information is needed - it works as expected for me (Windows 7, Chrome 62) — Reinstate Monica Cellio, Nov 27 '17 at 09:03
Why `$._data(field.$el[0], 'events')`? It should be `$._data(field.$el, 'events')` — Reinstate Monica Cellio, Nov 27 '17 at 09:14
@Archer https://stackoverflow.com/questions/2008592/can-i-find-events-bound-on-an-element-with-jquery — Dan, Nov 27 '17 at 09:16
Sorry - I take that back. The documentation I saw disagrees with that, but I did just test it. Perhaps you could explain why you need to get this? — Reinstate Monica Cellio, Nov 27 '17 at 09:17
I'm just using `$._data` as a debugging tool. All I'm really trying to do is bind a simple function to `keyup` and `change`, but, as discovered, the bound function seems to be getting removed. I suspect it has something to do with jQuery's internal garbage collection. I'm not binding after the document loads, I'm binding inline at runtime after the HTML for the elements referenced. — Dan, Nov 27 '17 at 09:23

score 0 · Accepted Answer · answered Nov 27 '17 at 10:16

0

The culprit: removing the element's parent from the dom using .remove() and re-inserting it elsewhere. The proper function to use in this case to retain the bound events is .detach().

answered Nov 27 '17 at 10:16

Dan

744
1
8
23

Events bound inline / at runtime being automatically deleted on document load

1 Answers1