CODEWITHSUNDEEP
jqueryhtml
Linas
Linas

Reputation: 4408

Jquery click function doesn't work

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?

Upvotes: 1

Views: 2506

Answers (5)

Chad
Chad

Reputation: 19609

.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.

Upvotes: 4

leemeichin
leemeichin

Reputation: 3379

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');
});

Upvotes: 1

kwelch
kwelch

Reputation: 2469

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.

Upvotes: 1

dimitril
dimitril

Reputation: 393

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!

Upvotes: 2

JMM
JMM

Reputation: 26787

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().

Upvotes: 1

Related Questions