ブートストラップページングのli要素を動的に生成し、onclickイベントに応答するようにします。

リスト要素が動的に生成されるBootStrapページングに問題があります。私はリスト要素を生成することができますが、ユーザーがそれらをクリックしたときのように、イベントに応答していないようです。ブートストラップページングのli要素を動的に生成し、onclickイベントに応答するようにします。

1）このコードは動作します：

私はあなたに、より良い私の問題を説明するための2つの例を挙げてみましょう。ここでは、すべてのリストアイテムが既に作成されている静的なページネーションを使用しています。ページネーションの要素をクリックするとわかるように、要素がアクティブになります。

https://jsfiddle.net/2040n6a2/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<body> 

<nav id="pag_nav"> 
    <ul class="pagination"> 
    <li class=prev><a href=# aria-label=Previous><span aria-hidden=true>&laquo;</span></a></li> 
     <li><a href=#>1</a></li> 
     <li><a href=#>2</a></li> 
     <li><a href=#>3</a></li> 
     <li><a href=#>4</a></li> 
     <li><a href=#>5</a></li> 
     <li class=next><a href=# aria-label=Previous><span aria-hidden=true>&raquo;</span></a></li> 
    </ul> 
</nav> 

var pageItem = $('.pagination > li').not('.prev,.next'); 
var prev = $('.pagination > li.prev'); 
var next = $('.pagination > li.next'); 

pageItem.click(function() { 
    pageItem.removeClass('active'); 
    $(this).not('.prev,.next').addClass('active'); 
}); 

next.click(function() { 
    $('li.active').removeClass('active').next().addClass('active'); 
}); 

prev.click(function() { 
    $('li.active').removeClass('active').prev().addClass('active'); 
});

2）このコードは動作しません。ここではリスト要素を動的に作成します。この場合、ページネーションの要素をクリックすると要素がアクティブにならない。

https://jsfiddle.net/n75d2vct/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<body> 

<nav id="pag_nav"> 
    <ul class="pagination"> 
    </ul> 
</nav> 

</body> 

var pageItem = $('.pagination > li').not('.prev,.next'); 
var prev = $('.pagination > li.prev'); 
var next = $('.pagination > li.next'); 

pageItem.click(function() { 
    pageItem.removeClass('active'); 
    $(this).not('.prev,.next').addClass('active'); 
}); 

next.click(function() { 
    $('li.active').removeClass('active').next().addClass('active'); 
}); 

prev.click(function() { 
    $('li.active').removeClass('active').prev().addClass('active'); 
}); 

$('#pag_nav ul').append('<li class=prev><a href=# aria-label=Previous><span aria-hidden=true>&laquo;</span></a></li>'); 

for (var i = 0; i <5; i++) 
{ 
    $('#pag_nav ul').append('<li><a href=#>' + i + '</a></li>'); 
} 

$('#pag_nav ul').append('<li class=next><a href=# aria-label=Previous><span aria-hidden=true>&raquo;</span></a></li>');

あなたは私が私の第二の例に間違ってやってるものを私に教えてもらえます？。私はDatatablesのようなよく知られたプラグインを使うことができると知っていますが、私はなぜ普通のBootStrap + jQueryを使って自分のコードが動作していないのか理解したいと思っています。

ありがとうございました。

出典

2016-10-20 Cardelco

行くようになるはずですキーワード_event delegation_を読んでください。 – CBroe

@Cardelco CBroeが述べているように、ここではイベント委任が必要です。あなたの場合は、JQueryの 'on'を使いたいと思っています： http://api.jquery.com/on/ – MasNotsram

他にも示唆しているように 'on'を使うことができますが、実際にはマークアップを生成するだけですイベントハンドラを設定します。まだ生成されていない要素にイベントハンドラを設定しているため、動作しません。 [このフィドルを見る]（https://jsfiddle.net/n75d2vct/1/）。 –

以下のコメントが言うように、このフィドルhttps://jsfiddle.net/v14t257h/を見てみましょう：あなたはevent delegation

を使用する必要がありますが、動的にページネーションを描きたい場合は、コードがこの

$('.pagination').on('click', 'li:not(.prev):not(.next)', function() { 
    $('.pagination li').removeClass('active'); 
    $(this).not('.prev,.next').addClass('active'); 
}); 

$('.pagination').on('click', 'li.prev', function() { 
    $('li.active').removeClass('active').prev().addClass('active'); 
}); 

$('.pagination').on('click', 'li.next', function() { 
    $('li.active').removeClass('active').next().addClass('active'); 
}); 

function drawPagination(numOfPages) { 
    $('#pag_nav ul').empty(); 
    $('#pag_nav ul').append('<li class=prev><a href=# aria-label=Previous><span aria-hidden=true>&laquo;</span></a></li>'); 
    for (var i = 1; i <= numOfPages; i++) { 
     $('#pag_nav ul').append('<li><a href=#>' + i + '</a></li>'); 
    } 
    $('#pag_nav ul').append('<li class=next><a href=# aria-label=Previous><span aria-hidden=true>&raquo;</span></a></li>'); 
} 

drawPagination(5);

出典

2016-10-20 15:47:16 gamboa

助けてくれてありがとう、それは働いた。 – Cardelco

ブートストラップページングのli要素を動的に生成し、onclickイベントに応答するようにします。

答えて

関連する問題