Question

我有以下代码用于分页，它在jquery / 1.4.2中完美地工作

<script type="text/javascript">
 $(document).ready(function () {
    function loading_show() {
        $('#loading').fadeIn('fast');
    }

    function loading_hide() {
        $('#loading').fadeOut('fast');
    }

    function loadData(page) {
        loading_show();
        $.ajax({
            type: "POST",
            url: "product_master_data.php",
            data: "page=" + page,
            success: function (msg) {
                $(document).ajaxComplete(function (event, request, settings) {
                    loading_hide();
                    $(".data").html(msg);
                });
            }
        });
    }
    loadData(1); // For first time page load default results
    $('#container .pagination li.active').on('click', function () {
        var page = $(this).attr('p');
        loadData(page);

    });
    $('#go_btn').on('click', function () {
        var page = parseInt($('.goto').val());
        var no_of_pages = parseInt($('.total').attr('a'));
        if (page != 0 && page <= no_of_pages) {
            loadData(page);
        } else {
            alert('Enter a PAGE between 1 and ' + no_of_pages);
            $('.goto').val("").focus();
            return false;
        }

    });
 });
</script>

但我最近升级到版本jquery 1.9.1，以下代码停止工作。

$('#container .pagination li.active').on('click', function () {
   var page = $(this).attr('p');
   loadData(page);

});
$('#go_btn').on('click', function () {
   var page = parseInt($('.goto').val());
   var no_of_pages = parseInt($('.total').attr('a'));
   if (page != 0 && page <= no_of_pages) {
       loadData(page);
   } else {
       alert('Enter a PAGE between 1 and ' + no_of_pages);
       $('.goto').val("").focus();
       return false;
   }

});

这是我的HTML

<div id="container">
  <div id="loading">
    <img id='imgSpinner1' src='../xxx/pagination/pagination.gif' />
  </div>
  <div class="data"></div>
  <div class="pagination"></div>
</div>

请让我知道要使其发挥作用需要做哪些更改。

我的服务器端代码

   $msg. = "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg. = "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg. = "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg. = "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
    $msg. = "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i) $msg. = "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else $msg. = "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg. = "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
    $msg. = "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg. = "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
    $msg. = "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>".$cur_page."</b> of <b>$no_of_paginations</b></span>";
$msg = $msg."</ul>".$goto.$total_string."</div>"; // Content for pagination

Answer 1

对于动态添加的项目，以这种方式绑定事件。

如果.pagination是动态的：

$('#container').on('click', '.pagination li.active', function() {
// code here
});

如果不是

$('#container .pagination').on('click', 'li.active', function() {
// code here
});

Answer 2

试试这个，委托给文档或最接近的静态元素

$(document).on('click','#go_btn',function(){
//code
});

点击不在jquery 1.9.1中工作

2 个答案: