0

私はページネーションのための以下のコードを持っています.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
4

2 に答える 2

4

これを試して、ドキュメントまたは最も近い静的要素に委任してください

$(document).on('click','#go_btn',function(){
//code
});
于 2013-07-26T09:57:57.650 に答える
4

動的に追加されたアイテムの場合、この方法でイベントをバインドします。

.pagination動的な場合:

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

そうでない場合

$('#container .pagination').on('click', 'li.active', function() {
// code here
});
于 2013-07-26T09:57:40.677 に答える