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

Answer 1

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!");
});​