Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
   <head>
<meta name="description" content="Event delegation article - Code 1">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Event delegation article - Code 1</title>
   </head>
   <body>
      <ol class="pagination">
         <li class="active">
            <a href="page/1">Item 1</a>
         </li>
         <li>
            <a href="page/2">Item 2</a>
         </li>
         <li>
            <a href="page/3">Item 3</a>
         </li>
         <li>
            <a href="page/4">Item 4</a>
         </li>
         <li>
            <a href="page/5">Item 5</a>
         </li>
      </ol>
   </body>
​
</html>
​
 
function onClick(event) {
   // Prevent the default action
   event.preventDefault();
​
   // Store the link of the clicked anchor
   const url = event.target.href;
​
   // Update the results by sending an Ajax request
   // to the URL specified in the "url" variable
​
   // Update the anchors in the pagination widget
   // and remove the event listener on the deleted anchors
​
   console.log('Fetching results at ' + url);
}
​
const anchors = document.querySelectorAll('.pagination a');
​
for (let i = 0; i < anchors.length; i++) {
   anchors[i].addEventListener('click', onClick);
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
AurelioDeRosapro
0viewers