0

一部のデータのページネーション用のリンクをいくつか生成しています。

リンクを生成する関数は次のとおりです。

function BuildPaginationNav(targetPage, pageSize) {

    var numRecords = $('#movieListTable').children().length,
    numPages = Math.ceil(numRecords / pageSize),
    startRecord = ((targetPage - 1) * pageSize);

    for (var i = startRecord; i <= startRecord + pageSize - 1; i++) {
        $('div#movieListTable > div:eq(' + i + ')').fadeIn(200);
    }

    // Only use prev page and first page buttons/links if not on first page
    if (targetPage > 1) { 
        $('#pagination').append('<br><a href="#" id="firstPage">First Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="prevPage">Prev Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;');
    } else if (targetPage = 1) {
        $('#pagination').append('<br>First Page&nbsp;&nbsp;|&nbsp;&nbsp;Prev Page&nbsp;&nbsp;|&nbsp;&nbsp;');
    }

    // Add the current page label
    $('#pagination').append('<label id="currentPage">' + targetPage + '</label>');

    // Only use next page and last page buttons/links if not on last page
    if (targetPage < numPages) {
        $('#pagination').append('&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="nextPage">Next Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="lastPage">Last Page</a>');
    } else if ( targetPage === numPages) {
        $('#pagination').append('&nbsp;&nbsp;|&nbsp;&nbsp;Next Page&nbsp;&nbsp;|&nbsp;&nbsp;Last Page');
    }
}

上記は意図したとおりに機能し、関数は、ページネーションの対象となるデータを取得する $.ajax 呼び出しの成功関数の最後で呼び出されます。

最初または最後のページにない場合、生成された HTML は次のようになります。

<div id="pagination">
    <br>
    <a href="#" id="firstPage">First Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#" id="prevPage">Prev Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <label id="currentPage">2</label>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#" id="nextPage">Next Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#" id="lastPage">Last Page</a>
</div>

必要なことは、クリックされたリンクの ID を取得して、適切なアクションを実行できるようにすることです。私はこれを試しました：

$('#pagination a').click(function() {
    console.log(this.id);
});

そして私もこれを試しました:

$('#pagination a').on('click', function() {
    console.log(this.id);
});

しかし、どちらも機能しません。生成された HTML と上記の jQuery を jsFiddle に配置すると機能しますが、完全なコードでは機能しません。

コードの他の場所でその関数を使用しているため、この場合 $.on() が機能しないことに特に驚いています。

生成された HTML を HTML としてページ自体に配置すると、jQueryが機能するため、リンクが動的に生成されるという事実に対応する必要があります。

これらのリンクのクリックを検出するにはどうすればよいですか?

4

3 に答える 3

0

イベントをバインドするとき、リンクはまだ作成されていません。既存の要素にライブ アクションをバインドする必要があります。

$(document).ready(function() {

    $("#pagination").on('click', 'a', function() { .... });

});

「#pagination」要素は、バインディング イベント時に使用できるようになっています。これは委任イベントと呼ばれます - http://api.jquery.com/on/

于 2013-03-15T21:26:46.030 に答える
0

私はそれを考え出した：

関数 $.delegate(); を見つけました。

BuildPaginationNav() 関数の最後に次のコードを追加しました。

$('#pagination').delegate('a', 'click', function() { console.log(this.id); });

そこから、必要なアクションを実行する関数を呼び出すだけです (console.log() がある場所)。

別の (またはもっと良い) 方法があれば、お知らせください。

于 2013-03-15T21:32:24.137 に答える
0

私は次の方法でそれをやったでしょう。

あなたのやり方で：

 // Only use prev page and first page buttons/links if not on first page
    if (targetPage > 1) { 
        $('#pagination').append('<br><a href="#" id="firstPage">First Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="prevPage">Prev Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;');
    } else if (targetPage = 1) {
        $('#pagination').append('<br>First Page&nbsp;&nbsp;|&nbsp;&nbsp;Prev Page&nbsp;&nbsp;|&nbsp;&nbsp;');
    }

私のやり方：

 // Only use prev page and first page buttons/links if not on first page
    if (targetPage > 1) { 
$FirstPage=$('<a href="#" id="firstPage">First Page</a>');
$FirstPage.click(function() { .... });
$('#pagination').append($FirstPage);

        //same for Prev page...
    } else if (targetPage = 1) {
       // same as above..
    }

このようにして...リンクの動作を1か所だけで見つけることができます。知るためにページ全体を検索する必要はありません..アンカーのクリックイベント..その他多数!!

于 2013-03-18T04:49:45.620 に答える