How to make sure custom script stays loaded after pagination?-CodePudding

I have some custom jQuery that disappears after paginating. I couldn't figure out how to keep it loaded so I figured I would try to reload it after click but thats not working either.

here is what i was trying to get it to run:

$(document).ready(function() {
$('.pagination>li>a').live("click", function(){

any ideas how to make this work?

what I would really like is to keep the custom jQuery while paginating, since there could potentially be 2 separate paginations on any given page (displaying notes and activities).

CodePudding user response：

It looks like you are trying to use the live method in your jQuery code, which was deprecated in jQuery 1.7 and removed in jQuery 1.9. Instead of using the live method, you can use the on method to attach an event handler to the a elements within the .pagination>li elements.

Here is an example of how you could use the on method to attach a click event handler to the pagination links:

$(document).ready(function() {
  $(document).on("click", ".pagination>li>a", function() {
    // Your code here
  });
});

The on method takes three arguments: the event type (e.g., "click"), a selector that matches the elements that you want to attach the event handler to, and the event handler function. In this example, the event type is "click" and the selector is ".pagination>li>a", which will match all a elements that are descendants of li elements that are descendants of an element with the pagination class. When a click event occurs on one of these elements, the event handler function will be called.

Note that the on method should be called on a parent element that exists on the page when the event handler is attached. In this case, I have called the on method on the document element, which will always exist on the page. This is important because the pagination links may be dynamically added to the page after the initial page load, and the on method will not be able to attach the event handler to these elements unless it is called on a parent element that exists on the page.

CodePudding user response：

It sounds like you're trying to add a click event listener to elements with the class pagination and a descendant li and a elements. The .live() method is no longer supported in newer versions of jQuery, so you'll need to use a different method to attach the event listener.

One option is to use the .on() method, which allows you to attach event listeners to elements that will be dynamically added to the page in the future. This method works by attaching the event listener to a parent element that exists on the page when the listener is added, and then listening for events that bubble up to that parent element from the dynamically added elements. Here's how you might modify your code to use the .on() method:

$(document).ready(function() {
  // Attach the event listener to the document, since it exists when the listener is added
  $(document).on("click", '.pagination>li>a', function() {
    // Your code here
  });
});

Alternatively, you can use the .delegate() method, which works in a similar way to .on(), but allows you to specify the parent element to which the event listener should be attached. Here's how you might modify your code to use .delegate():

$(document).ready(function() {
  // Attach the event listener to the .pagination element, since it exists when the listener is added
  $('.pagination').delegate("li a", "click", function() {
    // Your code here
  });
});