0

このjqueryを使用して、サーバーのphpファイルからページ分割されたデータを取得しています。php ファイルはページネーションを生成し、これらに関連付けられたデータを json 形式で返します。ページネーション データは li タグのリストとして返されます。これを使用して、html ファイル内の既存のブートストラップ ページネーションを置き換えます。

最初に、これは私のphpファイルによって生成されたものです

<ul>
<li class="active"><a>1 </a></li>
<li><a href="#2">2</a></li>
</ul>

2をクリックすると、次のページネーションが表示されます

<ul><li><a href="#1">1</a></li>
<li class="active"><a>2 </a></li></ul>

1をクリックして1のデータを取得すると、jqueryイベントが起動せず、jqueryコード

$("#pagination li a").click(function(e) { 
    debugger;
    e.preventDefault();

    var start=$(this).attr('href').split('#')[1];
    var msgDiv=$('#messages');
    var pagDiv=$("#pagination ul");
    try{
        $.ajax({ // create an AJAX call...
            beforeSend: function() {showLoading(msgDiv);},
            timeout:10000,
            type: "post", // GET or POST
            url: "./process-messages.php", // the file to call
            dataType:'json',
            data: {start:start}, // get the form data
            success: function(response) { // on success..
                if(response.status!='error'){
                   msgDiv.html(response.data); // update the DIV
                   pagDiv.html(response.page); // update the DIV
                }else{
                    msgDiv.html(response.data); // update the DIV
                }
            },
            error: function() { // on success..
                showGeneralError(msgDiv);
            }
        }); 
    }catch (e){
        console.log(e);
    }

});

何が問題なのですか？

4

2 に答える 2

1

ページがロードされたときに、クリックイベントを既存の要素にバインドしています。リストが置き換えられると、イベントは古い要素とともに削除されます。必要なのは、AJAX が返されたときに初期化関数を再度呼び出すか (少しぎこちない)、次の.on()ように使用することです。

$("#pagination-container").on("click", "li a", function() {
    // same as your handler
});

pagination-containerただし、ページに残す必要があることに注意してください。つまり、AJAX を介して更新しないでください。

<div id="pagination-container">
    <ul>
        ...pagination as in your code
    </ul>
</div>

AJAXが<ul>...</ul>ものを返すと思います。

于 2013-09-20T08:03:15.037 に答える
1

on動的コンテンツに使用する必要があります。試す

$(document).on('click', '#pagination li a', function() {

イベント委任は、イベントをリッスンするすべての要素にイベント ハンドラーを直接アタッチする代わりに、それらの要素の親要素に 1 つのイベント ハンドラーをアタッチして、その子孫要素で発生するイベントをリッスンするイベント処理手法です。

于 2013-09-20T08:00:57.307 に答える