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 2">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Event delegation article - Code 2</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) {
   // If the event is not triggered on one of the anchors,
   // there is nothing we want to do
   if (event.target.nodeName !== 'A') {
      return;
   }
​
   // 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
​
   console.log('Fetching results at ' + url);
}
​
const pagination = document.querySelector('.pagination');
​
pagination.addEventListener('click', onClick);
Output

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

Dismiss x
public
Bin info
AurelioDeRosapro
0viewers