Question

I have a jquery powered voting system, and the items on other pages are loaded via ajax, but on ajax-loaded contents the jquery voting needs the page to be refreshed for the vote to be processed.

http://ohmygosh.vr.lt/

I think the problem is within the actions in this file (?) But i’m not really sure. I don’t have any code to start since I don’t even know where to start. How do I fix this Problem?

Answer 1

Seems that you are using a SmartAjax to load the page content. What SmartAjax does is that it changes the page url (using pushState or hash), loads data and REPLACES the content of #posts div with the loaded content.

The problem is that you are listening click events from DOM elements which are later deleted and replaced with new DOM elements. Thus, the click events from the ajax loaded content are not listened. live() doesn’t help in this case.

To fix this, you have at least these two options:

1) Use jQuery’s delegate() to attach the handler and use #posts div as the root element, since it remains after the new content is loaded.

Something like this should work:

$('#posts').delegate(':input', 'click', function() {
    var value = $(this).val();
    alert('You have clicked thumbs up/down, value: ' + value);
    return false;
});

2) Add click listener to the loaded items after data loading is completed.

Notice: Starting jQuery 1.7 you should use on() instead of delegate()