0

There's a list of people whose info should be fetched. I have made a simple pagination for that list. However, List looks fine, but the buttons does not work after the first page.

Here is the HTML Code:

<div id="test-list">

<input type="text" class="search" style="width: 50%" placeholder="Search..." /><br><br>
    
<ul class="list" style="list-style-type:none; margin-left: -40px; margin-bottom: 0px">
                
<li style="margin-bottom: 0px"><button id="people_1" class="btn btnlink name">People 1</button></li>
<li style="margin-bottom: 0px"><button id="people_1" class="btn btnlink name">People 1</button></li>
<li style="margin-bottom: 0px"><button id="people_2" class="btn btnlink name">People 2</button></li>
<li style="margin-bottom: 0px"><button id="people_3" class="btn btnlink name">People 3</button></li>
<li style="margin-bottom: 0px"><button id="people_4" class="btn btnlink name">People 4</button></li>
<li style="margin-bottom: 0px"><button id="people_5" class="btn btnlink name">People 5</button></li>
<li style="margin-bottom: 0px"><button id="people_6" class="btn btnlink name">People 6</button></li>
<li style="margin-bottom: 0px"><button id="people_7" class="btn btnlink name">People 7</button></li>
<li style="margin-bottom: 0px"><button id="people_8" class="btn btnlink name">People 8</button></li>
<li style="margin-bottom: 0px"><button id="people_9" class="btn btnlink name">People 9</button></li>
<li style="margin-bottom: 0px"><button id="people_10" class="btn btnlink name">People 10</button></li>
        
</ul>
              
<ul class="pagination" style="margin-left: 40%"></ul>
             
</div>

Library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

Here is The jQuery code:

var monkeyList = new List('test-list', {
  valueNames: ['name'],
  page: 5,
  pagination: true,
});

for button click:

$(document).ready(function() {
                    
   $(".btnlink").on("click", function(){
                                         
        var id = $(this).attr('id');

        alert(id);
});
});

After first page, button click doesnt give alert, not working;

i also tried event binding functions, but doesnt work also.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Munem Sohan
  • 41
  • 1
  • 1
  • 11

0 Answers0