Jquery click function doesn't work

Question

So i have click function and i'm calling this function couple times on same div, so basicly i have this kind of div:

<div id="upload_submit" class="upload_submit">Content</div>

and i have two click functions:

    //first function
    $('.upload_submit').click(function(){
        $(this).removeClass('upload_submit');
        $(this).addClass('upload_cancel');
    });
    //second one
    $(".upload_cancel").click(function(){
        alert('test')
    });

So by default my div have class upload_submit after i click on that div i change class to upload_cancel so now if i click again i should get alert but for some reason it doesn't happen, what could be wrong?

you haven't delegated the events properly, and event binding only happens when the selector matches — zzzzBov
– zzzzBov, Commented Jan 23, 2012 at 19:39

Chad · Accepted Answer · 2012-01-23 20:29:51Z

4

.bind() (which .click is a wrapper around) only binds to elements existing at the time of the call. But you are dynamically changing the class meaning that there is no .upload_cancel to bind to when you try to bind it. Therefore you need a delegated event:

//first function
$(document).delegate('.upload_submit', 'click', function(){
    $(this).removeClass('upload_submit');
    $(this).addClass('upload_cancel');
});
//second one
$(document).delegate('.upload_cancel', 'click', function(){
    alert('test')
});

Or if you are using 1.7+ you can use the .on() syntax:

//first function
$(document).on('click', '.upload_submit', function(){
    $(this).removeClass('upload_submit');
    $(this).addClass('upload_cancel');
});
//second one
$(document).on('click', '.upload_cancel', function(){
    alert('test')
});

What this will do instead is bind a handler to the document element for a click event. It will then check if the triggering element matches your selector you passed in, if it does it will call your handler. This means that you can add and remove elements matching the selector provided and it will still call your click event handler correctly since the event is bound to the document not your specific element.

Here is a jsFiddle example of this solution.

For more information you can start reading this article.

edited Jan 23, 2012 at 20:29

answered Jan 23, 2012 at 19:40

Chad

19.6k4 gold badges54 silver badges75 bronze badges

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

2 Comments

leemeichin Over a year ago

live is discouraged. Use on if you're using jQuery 1.7.1, or delegate otherwise.

Esailija Over a year ago

@fuzzyDunlop live is not just discouraged but it will be deprecated. .delegate/.bind are fine though and in my opinion have better api design than .on

dimitril · Accepted Answer · 2012-01-23 19:41:34Z

2

Use the jQuery .on() function which is documented here: http://api.jquery.com/on/

This is needed because the class doesn't exist on DOM ready, but it is added on runtime.

Hope this helps!

answered Jan 23, 2012 at 19:41

dimitril

3932 silver badges4 bronze badges

Comments

JMM · Accepted Answer · 2012-01-23 19:40:59Z

1

The second event listener registration ($(".upload_cancel").click()) will only apply to elements that match the selector .upload_cancel at the time you call click(). So if your div doesn't have that class until after it's clicked, that event listener won't be registered to it. You can look into jQuery.live().

answered Jan 23, 2012 at 19:40

JMM

26.9k3 gold badges54 silver badges56 bronze badges

Comments

kwelch · Accepted Answer · 2012-01-23 19:43:40Z

1

If you are using atleast v1.7, you can achieve the same out as .live using .on

$(document).on("click", ".upload_cancel", function(event){

This was added in v1.7 and has the same functionality as the .live and as such .live was depreciated.

answered Jan 23, 2012 at 19:43

kwelch

2,48923 silver badges23 bronze badges

Comments

leemeichin · Accepted Answer · 2012-01-23 19:45:52Z

1

The example using live depends on deprecated code in the latest version of jQuery (1.7.1). You should use this instead:

$('.upload-submit').on('click', function() {
    $(this).removeClass('upload-submit');
    $(this).addClass('upload-cancel');
});

$('.upload-cancel').on('click', function() {
    alert('test');
});

If you have a version older than that, use delegate:

$(document).delegate('.upload-submit', function() {
    $(this).removeClass('upload-submit');
    $(this).addClass('upload-cancel');
});

$(document).delegate('.upload-cancel', function() {
    alert('test');
});

answered Jan 23, 2012 at 19:45

leemeichin

3,3871 gold badge26 silver badges31 bronze badges

Collectives™ on Stack Overflow

Jquery click function doesn't work

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related