2

I'm trying to add a click bind to the icon-next class if the td element doesn't have the ui-disabled class without using if statements if possible (no pun).

$(".icon-next:not(.ui-disabled)").bind('click',function(){});
user962449
  • 3,743
  • 9
  • 38
  • 53
  • Bear in mind that the click event will not be assigned automatically to elements that lose the `ui-disabled` class later on during runtime. – MMM Jan 14 '14 at 23:38
  • What version of jquery? the .on() method is the preferred method for attaching event handlers since 1.7 – JAL Jan 14 '14 at 23:38

2 Answers2

3

You want to do it like this:

$("td:not(.ui-disabled) .icon-next").bind("click",function(){});

As Johannes said, it would be a better idea to use .on() in order to delegate the event in case the .ui-disabled class is removed.

$("body").on("click", "td:not(.ui-disabled) .icon-next", function(){});
Community
  • 1
  • 1
Bill
  • 3,478
  • 23
  • 42
  • It should be noted that the `:not` selector does not work in IE8 and below. Though I'm not sure if JQuery compenstates for it. Otherwise you'll need [an alternative solution for IE8 and below](http://stackoverflow.com/questions/3077146/use-not-pseudo-class-in-ie7-ie8). – Hanna Jan 14 '14 at 23:37
  • @Johannes: That's unrelated to jQuery selectors, you're talking about CSS. – MMM Jan 14 '14 at 23:39
  • 1
    @MMM, that's good to know. I assumed they shared not just syntax but also functionality. I learned something new :) – Hanna Jan 14 '14 at 23:39
2

Billy was spot on with his code, though I would suggest you use .on() instead and use a delegated event so that events are properly bound/unbound.

$('body').on("click", "td:not(.ui-disabled) .icon-next", function(){});
Community
  • 1
  • 1
Hanna
  • 10,315
  • 11
  • 56
  • 89