Modifying attributes dynamically using jquery

Question

Here is a part of an HTML page:

<div class="ajax-load">

</div>

<button id="next" class="load-page-2">

And here is the javascript:

$(".load-page2").click(function() {
    $(".ajax-load").load("3.php");
    $.get('4.php', function(data) {
         $('.ajax-load').append(data);
             $.get('5.php', function(data){
                $('.ajax-load').append(data);
            });
        });

     // Now I need to change the class of the #next button

    $("#next").removeClass("load-page2");
    $("#next").addClass("load-page3");
}); // End click function



//Now different functionality for the same button but with class "load-page3" 

$(".load-page3").click(function(){
    // load 6.php 7.php 8.php
});

But this does not work. It seems like the button still has the "load-page2" class and hence loads 3.php 4.php and 5.php

Try using on $(document).on('click', '.load-page3', function(){ — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Sep 10, 2013 at 12:11

Arun P Johny · Accepted Answer · 2013-09-10 12:11:07Z

1

Since you are dealing with dynamic properties you need to use event delegation

$(document).on('click', '.load-page2', function(){
    //you code
})
$(document).on('click', '.load-page3', function(){
    //you code
})

When you add normal event handlers, those are attached to elements which matches the selectors at the time of the code execution, any changes made to the element attributes after that will not affect the registered handlers.

answered Sep 10, 2013 at 12:11

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

4 Comments

Swaroop Nagendra Over a year ago

Do you know everything about jquery?

Swaroop Nagendra Over a year ago

Why does it happen like this?

Tushar Gupta - curioustushar Over a year ago

@SwaroopNagendra Not sure about everything but he will solve all your problems. :)

A. Wolff Over a year ago

@SwaroopNagendra drinking some Masala chai? :)

Collectives™ on Stack Overflow

Modifying attributes dynamically using jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related