onclick = null after setting Jquery .on("click") to a function

Question

I'm trying to debug a click event in an element with JQuery, to know why the element sometimes reproduces the click event and sometimes doesn't.

The main question is why, if i set a debugger breakpoint INSIDE the click event function, if i debug what does "this" keyword has inside the body of the function, it does have "onclick = null"... But hasn't "this" (aka "currentTarget") just fired the click event? So why does it have "onclick = null"?

Here is the piece of code where the debuggers are:

container = $("#PosterContainer");
container.find("#PosterBody").html(data);
container.hide();

container.fadeIn({ queue: false, duration: 300 });

container.find("#PosterExit").on("click", function (element) {
    debugger
    var el = this;    //Here "el" has "onclick = null"
    container.fadeOut();
});
debugger    //Here "#PosterExit" has "onclick = null"

`onclick` is a property of the DOM element. jQuery does not use those to add events to the element (and that's a good thing) — Rory McCrossan, Feb 20 '18 at 09:16
I'm not used to jQuery anymore but isn't `this` supposed to be `$(this)` in jQuery callbacks ? — 3Dos, Feb 20 '18 at 09:16
@3Dos it depends on what you want to do. `this` is a reference to the clicked Element object. `$(this)` is that Element wrapped in a jQuery object. They have different purposes. — Rory McCrossan, Feb 20 '18 at 09:17
Oh thank you @RoryMcCrossan this was blurry in my mind. Now you cleared it :) — 3Dos, Feb 20 '18 at 09:18
@RoryMcCrossan so you mean that the behaviour is correct? How can i know if the click event has been properly binded to the element then? — MorgoZ, Feb 20 '18 at 09:25
Yes, this is correct behaviour. If you want to find if jQuery has bound an ebvent to an element you can use: `$._data(element, 'events');` https://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object — Rory McCrossan, Feb 20 '18 at 09:28

score 0 · Answer 1 · answered Feb 20 '18 at 09:31

container.find("#PosterExit") will not work try $("#PosterContainer #PosterExit")

       container = $("#PosterContainer"); 
       container.find("#PosterBody").html(data); 
       container.hide(); 
       container.fadeIn({ queue: false, duration: 300 }); 
       $("#PosterContainer #PosterExit").on("click", function (e) {
           debugger 
            var el = $(this); //Here "el" has "onclick = null" 
            container.fadeOut(); 
       }); 
      debugger

onclick = null after setting Jquery .on("click") to a function

1 Answers1