jQuery - Trying to understand events

Question

EDIT: Added a fiddle to demonstrate it: http://jsfiddle.net/Myw4H/

Assume that I have the following HTML markup:

<div class="bigicon icon">
  <img id="newItems" alt="New items" src="Resources/Icons/MailNewItemMenu.png" />
  <div class="iconlegend">
    New<br />Items
  <i class="fa fa-caret-down"></i>
</div>

Now, I want to execute an action when I click on it. This can be done with the following javascript:

$(".icon").click(function(e) {
    // When the icon holds a menu, show the menu.
    if ($(this).children(".menu").length > 0) {
        e.stopPropagation();
        $(".menu", this).first().EnableMenu(100, $(this));
     }
});

That's all working fine, but now let's change the HTML to disable the icon:

<div class="bigicon icon disabled">
  <img id="newItems" alt="New items" src="Resources/Icons/MailNewItemMenu.png" />
  <div class="iconlegend">
    New<br />Items
  <i class="fa fa-caret-down"></i>
</div>

Note: See the 'disabled' class on the outer div.

Now, I change my event to, what I believe, only applies to icons that are not disabled:

$(".icon:not(.disabled)").click(function(e) {
    // When the icon holds a menu, show the menu.
    if ($(this).children(".menu").length > 0) {
        e.stopPropagation();
        $(".menu", this).first().EnableMenu(100, $(this));
     }
});

However, the event is still fired event when the icon is disabled and I click on it.

Note: For the information, I'm adding the class disabled at runtime (through a javascript function).

Someone who can explain why this is happening and how to solve it?

Can you reproduce your problem in a fiddle ? I can't. You probably changed the code too much when trying to reduce it. — Denys Séguret, Jun 26 '14 at 12:52
@dystroy OP is adding that class at runtime, results in this discrepancy.. — Rajaprabhu Aravindasamy, Jun 26 '14 at 12:53
@RajaprabhuAravindasamy Maybe but that's not what he's saying in the question. — Denys Séguret, Jun 26 '14 at 12:53
@RajaprabhuAravindasamy To be clear : I don't think you misunderstood, I think you made a guess regarding OP's real problem. It may be the right one but I don't like it when you have to guess because OP didn't check the question he made. — Denys Séguret, Jun 26 '14 at 13:01

Huangism · Accepted Answer · 2014-06-26T15:16:24.343

0

If your disabled class is added after the click handler code has ran, then the click will trigger.

You can check for the class before doing anything. It doesn't matter when disabled is added, you check for it in the click handler to make sure things does not run if disabled class is there

$(".icon").click(function(e) {
    if(!$(this).hasClass('disabled')) {
    //  ....    
    }
});

UPDATE

Yes, you can delegate the event to container or the document

$(document).on('click','.icon:not(.disabled)', function(e) {
    alert("Hello");
});

I am using the document since I don't know what other container you have.

http://jsfiddle.net/Myw4H/7/

edited Jun 26 '14 at 15:16

answered Jun 26 '14 at 13:10

Huangism

16,278
7
48
74

This is indeed a solution, but I like to have it in the parent selector as this seems to much code for such a simple thing. – Complexity Jun 26 '14 at 13:12
@Complexity well you can always setup the click handler after the class is added :) also your fiddle missing the `.` before disabled. I am not sure if there is a simpler way than checking the disabled class on click provided the class is added after the handler. `hasClass` is quite fast – Huangism Jun 26 '14 at 13:15
Use `.on()`. See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – JJJ Jun 26 '14 at 15:10

score -1 · Answer 2 · answered Jun 26 '14 at 13:00

-1

try using .not() instead :not(). The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() selector filter. In most cases, it is a better choice.

answered Jun 26 '14 at 13:00

Satz

105
9

jQuery - Trying to understand events

2 Answers2