jQuery Basic problem

Question

Hi,

I have a page that display some data. It is loaded from a database using php and mysql, I use zend framework to handle all this.

On this page I have two things that use jquery. one is a paginator and the other is a thumps up function.

the paginator works fine. It receives the data as json and applys it to the view. all the functions that I need to handle this are located in one js file. In this file I listen for clicks...

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

Now I have a problem with the thumps up function. It is located in another js file. Everytime the thumbs up button is clicked the script should just alert "click". actually when you click before you use the paginator a "click" appears, but when you do it after nothing happens. but the html in the dom inspector appears to be the same.

in my thumpsup.js I just have

$(document).ready(function() {
$("a.tp").click(thumpsUp);
});

function thumpsUp() {
alert("click");
}

I do not know where the problem is. maybe the js files are interferring each other!?

function thumpsUp() {
var url = window.location.hostname + '/programme/thumpsup/id/'
        + $(this).attr('page');
$.post(url, {
    "format" : "json"
}, function(data) {
    alert(data);
}, 'html');
return false;

}

Answer 1

You might have the Script files (which are included in your mark up) the wrong way round. That's the only solution I can think of...

I'm pretty sure you can get away with two $(document).ready()'s (even if it is frowned upon).

Answer 2

I'm guessing the paginator is rewriting your elements and they are losing their click event binding. Try using live() for event binding instead:

$(document).ready(function() {
    $("a.tp").live('click',thumpsUp);
});

function thumpsUp() {
    alert("click");
}