Question

I am struggling with jQuery for a long time now. It is very powerful and there are lot of great things we can do with jQuery.

My problem is that I use a lot of jQuery features at the same time. E.g. I have a site that displays items, 12 items per page and I can paginate through the pages using jQuery. On the same page I implemented a thumpsUp button that uses jQuery too.

The more jQuery features I use, the harder it gets to arrange them properly. E.g.:

$(document).ready(function() {
 $(".cornerize").corner("5px"); //cornerize links
 $('a#verd').live('click', exSite); //open iframe
 $("a.tp").live('click', thumpsUp); //thumps up
 $("a#next").click(getProgramms); //next page
 $("a#previous").click(getProgramms); //previous page
    //for the current page reload the content
 $("a#page").each(function() {
  $(this).click(getProgramms);
 });
 //this isn't working...
 $('.smallerpost').live('click', alert('test'));
});

Have a look at the last code line. I want to perform an alert when the div element is clicked. Instead of doing so the page shows me the alert when I refresh the page. A click on the div has no effect.

What am I doing wrong? What would be a strategy here to have clean and working jQuery?

Answer 1

Change that line to

$('.smallerpost').live('click', function () {
    alert('test');
});

and while you’re there…

$("a#page").each(function() {
    $(this).click(getProgramms);
});

has exactly the same effect as:

$('a#page').click(getProgramms);

… but technically there should be only one element with id=’page’ anyway