Question

I’m trying to create an event for my jQuery/PHP to load more content on scroll down. But I’ve run into some troubles about my .on() event.

I’ve created a function (which is the following code you see, I just removed the function functioname{}), which is called when the bottom of the page is reached.

My problem is that with .on() you have to add a “click” property, which is kinda hard for me, because it has to load without the click. Is there a property that makes it run the .on() when I’ve called the function?

$("#container").on("click", ".box", function(event){
    alert("hej");

 $.post("site/scroll.php?mabid=" + $mabid,
  function(data){
    if (data != "") {
    alert($(".box:last").attr("mabid"));
    $(".box:last").after(data); 
  }
 });
});

The reason I’m using .on() is because it has to add a jQuery plugin to the new created elements, which is .box, which makes it have the right layout. The plugin I’m trying to bind to the new created dom elements is this: http://www.wookmark.com/jquery-plugin

UPDATE

I don’t have troubles loading the content. I have troubles adding the jQuery plugin Wookmark to the NEW DOM elements. Which means that it’s messy and looks very very bad.

Please read the small description of WookMark plugin on their website. It’s a plugin that makes .box act like on pinterest.com or wookmark.com where they fit-into eachother.

Right now the new DOM elements just inserts and looks messy, WITHOUT the plugin activated.

UPDATE2

After some communication and misunderstandings the problem is solved by just adding the Wookmark plugin to the new elements in the $.post(); like:

$.post("scroll.php?...", function(data){

  if(data != ""){
   //add the new dom elements, with .after(), .append() or something else.
   //add the needed effects to the new dom elements. For example with wookmark:
   $('.box').wookmark(//wanted effects); where .box is the dom elements I've created.
  }

});

Thanks for the help to everyone, especially FelixKling and Oscar!

Answer 1

It seems all you have to do, once you got the new data, is applying the plugin to the new elements.

Either apply it directly to them:

$(data).wookmark();

or select all of these elements once you added the new data to the DOM:

$('.box').wookmark();

That said, I don’t know what happens when you apply the plugin multiple times to the same elements. Maybe it is better to only apply it to the new elements.