jQuery, Triggering event from Class

Question

Please take a look at the following code and fiddle.

CODE

$("#enable").click(function(e) {
    if (!$("#enable").data('isOn')) {
        $("#holder").find('.clickable').each(function(d) {
            $(this).css('border', '1px solid red');
            $(this).addClass('clickEnabled');
        });
        $("#enable").data('isOn', true);
    } else {
        $("#holder").find('.clickable').each(function(d) {
            $(this).css('border', '');
            $(this).removeClass('clickEnabled');
        });
        $("#enable").data('isOn', false);

    }

});

$(".clickEnabled").click(function(e) {
    alert('clicked');
});

Fiddle: http://jsfiddle.net/qAuwt/

I am basically trying to toggle a "clickEnabled" class on elements when a button is pressed. The toggling is working as the border is changing however the clickEnabled class is not responding to click events

Waleed Khan · Accepted Answer · 2012-07-25 17:11:30Z

2

There are no .clickEnabled elements when you set the event handler. You can still catch the click event, though:

$(document).on("click", ".clickEnabled", function(){
    alert("Hello, world!");
});

answered Jul 25, 2012 at 17:11

Waleed Khan

11.5k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user974896 Over a year ago

Isn't that inefficient due to the fact that all clicks on the document traverse the dom tree every single time?

Joe Flynn Over a year ago

You don't have to do it this way. See my answer for an alternative.

Joe Flynn · Accepted Answer · 2012-07-25 17:21:56Z

1

Change:

$(".clickEnabled").click(function (e) {
    alert('clicked');   
});

To:

$(".clickable").click(function (e) {
    if ( $(this).hasClass("clickEnabled") )
    {
        alert('clicked');   
    }
});

As @araxanas mentioned, the .clickEnabled don't exist on load. So I switched the selector to .clickable, which do. However, you only want to handle the click when they're enabled. That's why I've added the conditional. It'll only alert if the clicked element has the clickEnabled class.

Also, it might help to move the css out of javascript, that way you can see visually if the class is there or not, see my updated fiddle.

edited Jul 25, 2012 at 17:21

answered Jul 25, 2012 at 17:15

Joe Flynn

7,2346 gold badges34 silver badges44 bronze badges

1 Comment

user974896 Over a year ago

I like your answer due to the efficiency but it will not work with my code as I bind and unbind events.

Roman Mazur · Accepted Answer · 2012-07-25 17:17:43Z

-1

The problem is that when page loaded, the click event handler binds to no elements (because there is no element with class 'clickEnabled').

The solution is to change the .click() method to .live() method:

$(".clickEnabled").live('click', function (e) {
    alert('clicked');
});

answered Jul 25, 2012 at 17:17

Roman Mazur

5126 silver badges17 bronze badges

1 Comment

Waleed Khan Over a year ago

live is deprecated in jQuery >1.7.

Collectives™ on Stack Overflow

jQuery, Triggering event from Class

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related