なぜ私は各番号をクリックすると、私は2つだけコンソールを取得します。 In PaginationJS

Question

ここでは、各リスト（li）から数値を取得するために、jqueryで.each（）関数を使用します。

問題は、.each（）関数を使用して、私は唯一の2つのコンソールのみを取得するクリック機能を実行するときにコンソールをしようとすると、次に動作しない理由です。

$('#pagination').pagination({ 
 
    dataSource: [1, 2, 3, 4, 5, 6, 7], 
 
    pageSize: 1 
 
}); 
 

 
$('#pagination li').each(function() { 
 
    $(this).on('click', function() { 
 
    var numPagination = $(this).data('num'); 
 
    console.log(numPagination); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.0.8/pagination.min.js"></script> 
 

 
<div id="pagination"></div>

私のコードを修正してください。 :)

Answer 1

これを行う適切な方法は、コールバック関数を使用することです。この機能を使用すると、次の矢印と前の矢印をサポートすることもできます。あなたのクリックリスナーが古いと一緒に削除される - 各 `#paginationのli`要素はpaginationjsによって再構築されるように、全ページネーションDOMの原因をクリック

$('#pagination').pagination({ 
 
    dataSource: [1, 2, 3, 4, 5, 6, 7], 
 
    pageSize: 1, 
 
    callback: function(data, pagination) { 
 
    console.log(data[0]); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.0.8/pagination.min.js"></script> 
 

 
<div id="pagination"></div>