Question

以下是HTML页面的一部分：

<div class="ajax-load">

</div>

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

这是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
});

但这不起作用。似乎按钮仍然具有"load-page2" class，因此加载3.php 4.php and 5.php

Answer 1

由于您正在处理动态属性，因此需要使用事件委派

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

当您添加普通事件处理程序时，这些处理程序附加到与代码执行时的选择器匹配的元素，之后对元素属性所做的任何更改都不会影响已注册的处理程序。

使用jquery动态修改属性

1 个答案: