CODEWITHSUNDEEP
jquery
user1370288
user1370288

Reputation: 919

.removeAttr to remove classes, tho script still works

Having a confusing issue with jQuery, basicly this code is added to 2 elements, and works fine, but I wan it to NOT work if you click a seperate element, I thought removing the class from these elements would stop them from workign, but even with no class they are still working... here some code.

$(".q1a1, .q1a3").click(function (e) {
e.preventDefault();
$(this).animate({ backgroundColor: "#db384b" }, 1000);
$(this).animate({ backgroundColor: "#0F437D" }, 2000);
$(this).children('.wrong').fadeIn(1000).fadeOut(2000);
});

^ I want this code to not work after the code below is clicked (if that makes sense)

$(".q1a2").click(function (e) {
e.preventDefault();
$(this).animate({ backgroundColor: "#00a6eb" }, 800);
$('.q1a2 .correct').show();
$('.q1a1, .q1a3 ').removeAttr("class");
});

Any ideas?

Upvotes: 0

Views: 155

Answers (3)

Rodik
Rodik

Reputation: 4092

Removing the class will not help, as you have already attached the click event to the element.

You should use unbind to remove

$('.q1a1, .q1a3 ').unbind("click");

http://api.jquery.com/unbind/

Upvotes: 0

user1020746
user1020746

Reputation: 46

Try doing a .unbind(). Looks something like this.

$('.q1a1, .q1a3 ').unbind('click');

You can read more about .unbind() http://api.jquery.com/unbind/

Upvotes: 1

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

You can declare your handler in a separate function, something similar to this:

var SomeFunction = function(e) {
    e.preventDefault();

    // your function code goes here

    $(this).unbind(SomeFunction); // and this removes the handler from the element on the first click
};

$(".q1a1, .q1a3").click(SomeFunction);

Upvotes: 0

Related Questions