jQuery - Trying to understand events -

jQuery - Trying to understand events -

edit: added fiddle demonstrate it: http://jsfiddle.net/myw4h/

assume have next 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, want execute action when click on it. can done next javascript:

$(".icon").click(function(e) { // when icon holds menu, show menu. if ($(this).children(".menu").length > 0) { e.stoppropagation(); $(".menu", this).first().enablemenu(100, $(this)); } });

that's working fine, let's alter html disable 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 'disabled' class on outer div.

now, alter event to, believe, applies icons not disabled:

$(".icon:not(.disabled)").click(function(e) { // when icon holds menu, show menu. if ($(this).children(".menu").length > 0) { e.stoppropagation(); $(".menu", this).first().enablemenu(100, $(this)); } });

however, event still fired event when icon disabled , click on it.

note: information, i'm adding class disabled @ runtime (through javascript function).

someone can explain why happening , how solve it?

if disabled class added after click handler code has ran, click trigger.

you can check class before doing anything. doesn't matter when disabled added, check in click handler create sure things not run if disabled class there

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

update

yes, can delegate event container or document

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

i using document since don't know other container have.

http://jsfiddle.net/myw4h/7/

jquery