adding a class to div, then onclick event with that class

Question

I have an element that isn't clickable at first, but I'd like to make clicking on another div make it clickable.

What I did was

$("#div_1").addClass("selected");

$(".selected").click(function() {
    $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500);
});

but this doesn't seem to work, I'm not sure what's wrong with this, maybe there's a better way to do this?

Well it depends upon where you're firing the event from, and where you're binding the click event. Please post some more javascript code. — Pulkit Mittal
– Pulkit Mittal, Commented Oct 24, 2012 at 16:32
works fine here..jsfiddle.net/hVvJK/1.. You just have to make sure you are binding the click event handler after the element exists.. Or you can use delegation — wirey00
– wirey00, Commented Oct 24, 2012 at 16:36

Rick Donohoe · Accepted Answer · 2012-10-24 16:32:25Z

1

Try something like this:

$("#div_1").addClass("selected");

$("#div_1").click(function() {
    if($(this).hasClass('.selected') {
    $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500);
    }
});

Also for usability purposes when you add the click-able functionality use this to make it appear click-able to the user:

$("#div_1").addClass("selected").css('cursor', 'pointer');

answered Oct 24, 2012 at 16:32

Rick Donohoe

7,2916 gold badges28 silver badges38 bronze badges

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

Comments

Sushanth -- · Accepted Answer · 2012-10-24 16:43:28Z

0

You need to delegate such cases... try using .on() and attach the event to the static parent..

Because when the class is added the event is already associated to when the DOM loads.. So delegating it will solve the problem.

$("#div_1").addClass("selected");

$('body').on("click", ".selected", function() {
     // Your code here
});

answered Oct 24, 2012 at 16:43

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

adding a class to div, then onclick event with that class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related