Question

I wrote a little pager which removes and rewrites content. I have a function called after loading the page, it shall be executed after changing the page as well. Because I do not wat to implement the function twice (on initialisation and after changing the page) I tried bind()/live() and a simple function.

The function looks like this:

jQuery('.blogentry').each(function (){
    jQuery(this).click(function(){
        //Clicking on the element opens a layer, definitely works - I tested it
    });
});

It is executed after initialisation, for executing it after page changes as well I tried the following:

jQuery('.nextPage, .prevPage').click(function changePage(){
    // Changing page and rewriting content
    showEntry();
});
//...
showEntry();
//...
function showEntry(){
jQuery('.blogentry').each(function (){
    jQuery(this).click(function(){
        //Clicking on the element opens a layer, definitely works - I tested it
    });
});
}

But the function is not executed if put inside a function (lol) and called via showEntry();

Afterwards I tried to bind the function…

jQuery('.nextPage, .prevPage').click(function changePage(){
    // Changing page and rewriting content
    jQuery('.blogentry').bind("click", showEntry);
});
//...
jQuery(this).click(function showEntry(){
    //Clicking on the element opens a layer, definitely works - I tested it
});

Did not work either. Code after the bind()-line would not execute as well.
I thought maybe it’s a problem to bind to an event function, if an event is already given via the parameter so i also tried this:

jQuery('.nextPage, .prevPage').click(function changePage(){
    // Changing page and rewriting content
    jQuery('.blogentry').bind("click", showEntry);
});
//...
function showEntry(){
    //Clicking on the element opens a layer, definitely works - I tested it
});
}

No success at all. Maybe I cannot call the function from inside the function regarding to the bind()? Maybe I just do not understand the bind()-function at all? I also tried the live() function since it seemed to fit better, as I am rewriting the content all the time. But it had the same effect: none…

Answer 1

The simplest way to implement this should be

jQuery('.blogentry').live('click', function() { /* onclick handler */ }); 

This should bind the function to every blogentry on the page at the moment of the call and all the blogentries that are added to the page later on.

Additional notes:

In $(foo).each(function() { $(this).click(fun); }); the each is unnecessary – $(foo).click(fun); is enough.

$(foo).bind('click', fun); is functionally equivalent to $(foo).click(fun) – it does not matter which one you use.