0

This is kind of an off little issue and I am sure I'm missing something really small, but I swear I am going crazy.

I have a button that I am trying to add and remove a class on and that is working, but as soon as I try and call another function with that new class the function just failed silently. I do not know why this is failing silently and would very much like it to work

Here is a jsFiddle I'm working with, it is extremely stripped down from what I am using it for. So on initial glance it looks like I can do a toggle class, but with all my other code in there it is just not possible.

The same code posted here

$('.holdProject').on('click', function(){

    $('.holdProject').addClass('resumeProject');
    $('.holdProject').removeClass('holdProject');
    console.log('here');
});    

$('.resumeProject').on('click', function(){
  $('.resumeProject').addClass('holdProject');
  $('.resumeProject').removeClass('resumeProject');
  console.log('there');
});

Again, this is a very basic example and a toggle class will not be possible for what I am using this for.

Any help would be awesome!

Improve this question
1
  • What is the question exactly? Can you show us the HTML as well? Commented Jan 10, 2014 at 19:57

3 Answers 3

Reset to default
2

You need delegate the click function, since no .resumeProject elements exist on DOMReady. You can achieve this by passing in a selector to the on() function:

$(document).on('click', '.resumeProject', function() {
    $(this).addClass('resumeProject').removeClass('holdProject');
});

In addition, you could easily combine the two handlers using is():

$(document).on('click', '.resumeProject,.holdProject', function() { 
    if($(this).is('.resumeProject'))
    {
        $(this).addClass('holdProject').removeClass('resumeProject');
    }
    else
    {
        $(this).addClass('resumeProject').removeClass('holdProject');
    }
});

It is always better of course, to narrow down the delegation, so that the event should be bound to the nearest static parent element. Since we don't know the context or HTML, it's difficult to say for certain what that is in your case.

jsFiddle Demo

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

9 Comments

With the disclaimer that for performance reasons, you should replace document with the nearest static ancestor element.
Thanks, I was in the process of editing the answer to include the caveat you mention above, @JamesMontagne.
This works, but could you please put a div where the document is. It's really not a good practice to call the document in an on click.
You can put a div there, but if your button isn't in a div then the event won't work. See the caveat I added, it's better to delegate to the closest static parent. You only gave us <button> in your HTML code, not the whole page so I had to make some assumptions...
@zazvorniki Can I ask if there's a reason you haven't accepted one of the answers?
|
2

The issue is that the binding is set on an element that does not exist. Try scoping the bindings to a parent div or document if you have to like so:

$(document).on("click", ".holdProject", function(){ 
   $(this).addClass('resumeProject');
   $(this).removeClass('holdProject');
});

$(document).on("click", ".resumeProject", function(){ 
   $(this).addClass('holdProject');
   $(this).removeClass('resumeProject');
});
Improve this answer

8 Comments

Binding delegates to document isn't usually a great idea, since it will handle every click event on the entire page before filtering out ones that don't match the criteria.
I have this running in the document.ready. And Why would I want to attach a click to the document when I have a button with a class?
the button does not exist at the time the event is declared, you should delegate it to a parent container. I used document because no parent container was specified.
This does work, but it would be much, much, much better if instead of calling the document you called a div.
@crush and zazvorniki You are both correct, that is why I suggested to use a parent container, I used document in my code sample for the example's sake, in my answer I specified a parent container is ideal.
|
0

Please try this code

$(document).on('click', '.holdProject', function(){

    $(this).addClass('resumeProject').removeClass('holdProject');;
    console.log('here');
});    
$(document).on('click', '.resumeProject',function(){
    $(this).addClass('holdProject').removeClass('resumeProject');
    console.log('there');
});

jsfiddle

Improve this answer

1 Comment

Quick posted, i had not copy your answer, you win @BenM

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.