Click event doesn't get triggered from second page onward

Question

I have a issue with click event. I am using jPList plugin and I have a click function for each result set. The first page click function is working correctly, but when I select second or third page and click the button it doesn't get fired.

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');
})

});

Can anyone help me with this please.

See the JSfiddle

It's usually a good idea to post your code directly into the question rather than link out. — David Maust, Dec 14 '15 at 05:53
Check this http://jsfiddle.net/ymu0nox6/2/, as your button gets created dynamically you need to use `$("body").on('click', '.hitme', function(){...yourCode...})` to find that button for second time — Aatman, Dec 14 '15 at 05:58
Likely a delegation issue. Try `$("#demo").on("click",".hitme",function() {....});` — mplungjan, Dec 14 '15 at 05:59

score 2 · Answer 1 · answered Dec 14 '15 at 07:23

Try this code

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

score 0 · Accepted Answer · answered Dec 14 '15 at 08:53

Since the element is not yet generated hence the click event is not bind. Delegate the event from some element which is already loaded, I changed the 'click' event to as shown below:

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

Demo

Cheers,

Ashok

Click event doesn't get triggered from second page onward

2 Answers2