0

I have a question similar to this one, however there is one important difference. The method provided in the accepted answer works properly with "directly" bound events. It does not produce results if the handlers are assigned with the delegate method. For example:

$("#some-element").delegate(".some-class", "click", function () {
  alert("Click!");
});

After elements with class some-class are generated and inserted into the html, is there a way to test if the click event handler has been bound to them?

EDIT: As per @Pointy's comment I'll correct the question above, since the handler wouldn't be bound to .some-class:

Is there a way to check if an element, represented, for instance, by a jQuery object (in this example it could be $(".some-class")), if clicked, would trigger the handler?

Community
  • 1
  • 1
Przemek
  • 6,300
  • 12
  • 44
  • 61
  • 3
    The "click" event handler is *not* bound to those elements. It's bound to "#some-element", and that doesn't change just because the DOM changes. The events propagate up the DOM ("bubble"), and the handler bound to "#some-element" first makes sure that the event target has class "some-class". If so, the handler is called. – Pointy Feb 01 '12 at 14:03
  • I understand. Knowing that - is there a way to simulate the behaviour I mentioned in the question? I'll correct it now to be more specific – Przemek Feb 01 '12 at 14:13
  • Well I don't think there's a ready-to-use jQuery mechanism to check for this. I suppose you could write one, if you figured out where/how jQuery stores the event qualifier information for ".delegate()". It seems like it would be easier to simply keep your own records of what handlers are set up. – Pointy Feb 01 '12 at 14:15
  • 1
    You can check it if you know to which element root your events are delegated. If you know it then you can check `$("#some-element").data('events')` for event listener for your `.some-class` selector. – dfsq Feb 01 '12 at 14:41

1 Answers1

1

As pointed out by Pointy the events bubble up and there is single "master" event handler bound to the root element which checks if the element which initially received the click has the class you provided, if it does, your callback will be called.

So to check if your callback is going to be called on the element all you have to do is to check if the element is in the list provided by selector $("#some-element .some-class");

So something like this should work (haven't tested):

var testEl = elementYouWantToTestAgainst;
if ($("#some-element .some-class").is(testEl)) {
    //It is "bound"
}

Or another solution, which does the same thing;

//Which should do something like this:  
var els = $("#some-element .some-class");
els.each(function() {
    if (this === testEl) {
        //It is "bound"
    }
});

As for debugging events, I usually just add console.log("Event fubar fired!"); to the handlers.

Community
  • 1
  • 1
Maiku Mori
  • 7,419
  • 2
  • 40
  • 52
  • \@Maiku: You can use the `is()` method and simply do; `if ($("#some-element .some-class").is(elementYouWantToTestAgainst))` – Matt Feb 01 '12 at 14:21
  • I have some problems when trying to trigger a `click` event in my application and I need it for debugging purposes. Thanks for the tip, I'll try it. – Przemek Feb 01 '12 at 14:21
  • @Matt, thanks, I was just browsing the docs to see if there's something like that. I don't use much jQuery nowadays. – Maiku Mori Feb 01 '12 at 14:23
  • Remember, however, that some element between .some-class and #some-element may call .stopPropagation() to prevent the click from reaching the delegate handler. – Dave Methvin Feb 01 '12 at 15:05