-1

I am working on product listing page more products are loaded with infinite scroll The problem is when the new page load, the jQuery on click event on the loaded page will not execute when user click on "add to cart". the script would have worked if it was loaded with jquery load(). but infinite scroll is using something else like I don't know.

$(document).ready(function() {
  jQuery_1_6_1('#mycontent').infinitescroll({
    navSelector: "#mynext:last",
    nextSelector: "#mynext:last",
    itemSelector: "#mycontent",
    debug: false,
    dataType: 'html',
    maxPage: <?php echo $pages_load;?>,
    path: function(index) {
        return "pages/index" + index + ".html";


      }
      // appendCallback : false, // USE FOR PREPENDING
  }, function(newElements, data, url) {

  });
});
JSking
  • 329
  • 1
  • 3
  • 16
  • Do you see any errors in the javascript console? It doesn't work isn't very helpful. – Robbert Nov 01 '16 at 17:19
  • no error seen please, its working if I use normal load to load the content, but if you use infinite-scroll no way – JSking Nov 01 '16 at 17:24
  • Simply use a delegated event handler, attached to `document`, loaded once at start up, to handle the click event. They will still fire on elements loaded later. In this instance it would help to show your click handler code too :) – Gone Coding Nov 01 '16 at 17:28
  • Are you expecting the code you posted to run every time the next part of the page loads? It won't work that way. $("document").ready will only run once. Your ready function must than include some code to watch for the page to scroll – Robbert Nov 01 '16 at 17:29
  • Presuming your add to cart function is via javascript, use the on click like so `$(document).on('click', dynamic_element, function() {...` – Novocaine Nov 01 '16 at 17:31
  • @Novocaine. Don't use `body` for delegated events. It has a bug that can occur to do with styling. `document` is safer :) – Gone Coding Nov 01 '16 at 17:32
  • @GoneCoding thanks for the tip. Never had an issue with it personally, but good to know. – Novocaine Nov 01 '16 at 17:33
  • i have tried the $(document).on('click', dynamic_element, function() {... before and it did not respond.. – JSking Nov 01 '16 at 17:43

1 Answers1

2

From my comment: Simply use a delegated event handler, attached to document, loaded once at start up, to handle the click event. They will still fire on elements loaded later.

Assuming your add to cart buttons have a class of "addtocart" you could do something like this:

$(document).on('click', '.addtocart', function(){
   // handle click here
});

It works by delegating the event listening to an ancestor element (e.g. document), then it applies the jquery selector to the elements in the bubble chain, then it applies your event function to the matching elements that caused the event.

The upshot of delegated events is that the elements do not need to exist at event registration time, but only at event time.

Gone Coding
  • 88,305
  • 23
  • 172
  • 188
  • 1
    This is correct implementation. Searching for 'Dynamic Event Handlers' on SO will result in about a billion answers saying this. – rob Nov 01 '16 at 18:01
  • thanks for your answer GoneCoding, this method did not work because its "infinite-scrol" plugin we are talking about. I used $("#mycontent").load(.... to load the content and it works but if the content is loaded by infinite scroll it will not work. – JSking Nov 01 '16 at 18:04
  • @Ekumahost: This will work with any infinite-scroll plugin *because the click events are then delegated*. if you post your `click` event code, as previously requested, I will show you how to do it. :) – Gone Coding Nov 02 '16 at 09:59
  • my javascript file is on the loaded page, I discovered that infinitescroll remove the js tags from the loaded page, how do I stop them from removing it? – JSking Nov 02 '16 at 10:02
  • @Ekumahost: Most plugins will strip Javascript from data loading (and many flatten the DOM removing certain elements). As I stated in the first line: "Loaded once at startup". i.e. your script should not be in the loaded content, but in the page that loads the content. – Gone Coding Nov 02 '16 at 10:28
  • yea, now because of dynamic_content my script must be in the loaded page.. now thats what I want to achieve. the script cannot just be in the page loading it because of dynamic content ID should be passed to the function.. – JSking Nov 02 '16 at 10:33
  • @Ekumahost: No. I think you are missing the key point. You *do not* need to have the script in the loaded pages just because of dynamic content. You just need to use *delegated event handlers* loaded in the main page (to listen for events from the loaded DOM elements). Please provide a full example of your pages & scripts and I will mock up a working example. JSFiddle would be my preference. – Gone Coding Nov 02 '16 at 10:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127169/discussion-between-ekumahost-and-gone-coding). – JSking Nov 02 '16 at 10:52
  • @Ekumahost: After examining your actual code from the discussion link, you need to rework it a lot to make it work with infinite scrolling. You are injecting loads of client-side forms etc that could all be made into a few delegated functions. Suggest you study how to use delegated event handlers and change the code to match. There is way too much to fix for me to consider doing it for you. I can only point you in the right direction. Good luck :) – Gone Coding Nov 02 '16 at 13:59
  • you have been very helpful I will get down to work and still notify you on my changes later on. – JSking Nov 02 '16 at 17:17
  • Gone Coding? your comment and guide have been very helpful. I was able to achieve the task and also simplified my code. Am grateful. When I come to your country I will buy you beer :; – JSking Nov 04 '16 at 11:18