Question

我遇到点击事件的问题。我正在使用jPList插件，每个结果集都有一个click功能。第一页单击功能正常工作，但是当我选择第二页或第三页并单击按钮时它不会被触发。

HTML

<!-- demo -->
<div id="demo">

<!-- panel -->
<div class="jplist-panel">

<!-- pagination control -->
<div class="jplist-pagination" data-control-type="pagination" data-control-name="paging" data-control-action="paging" data-items-per-page="2">
</div>

</div>

<!-- HTML data -->
<div class="list">

<!-- item 1 -->
<div class="list-item">
  <p>
    first result
  </p>
  <p class="hitme">
    click me
  </p>
  <hr>
</div>

<!-- item 2 -->
<div class="list-item">
  <p>
    second result
  </p>
  <hr>
</div>

<!-- item 3 -->
<div class="list-item">
  <p>
    thrid result
  </p>
  <button class="hitme">
    click me
  </button>
  <hr>
</div>

<!-- item 4 -->
<div class="list-item">
  <p>
    fourth result
  </p>
  <hr>
 </div>
 <hr>

 <!-- item 5 -->
 <div class="list-item">
  <p>
    fifth result
  </p>
  <button class="hitme">
    click me
  </button>
  <hr>

 </div>

 <!-- item 6 -->
 <div class="list-item">
  <p>
    sixth result
  </p>
   </div>
 </div>
 </div>

的jQuery

$('document').ready(function() {

$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item',
panelPath: '.jplist-panel'
});

$('.hitme').on('click', function() {
 alert('clicked');
})

});

任何人都可以帮助我。

请参阅JSfiddle

Answer 1

试试此代码

$('document').ready(function() {
      $('#demo').jplist({
         itemsBox: '.list',
         itemPath: '.list-item',
         panelPath: '.jplist-panel'
      });
      $("body").on('click', '.hitme', function(){
         alert('clicked');
      });
   });

Answer 2

由于尚未生成元素，因此click事件未绑定。从已经加载的某个元素中委派事件，我更改了“点击”＃39;事件如下所示：

$(document).on('click', '.hitme' , function() {
    alert('clicked');
  })

Demo

干杯，

阿肖克

点击事件不会从第二页开始触发

2 个答案: