Jquery div and class conflict - php

Question

I'm having some trouble with my jquery ajax code.
I have 2 functions, one that will submit a value and other that will update the values in real time.. At least that's what it is supposed to do. :P
So, I have a list that is created throught some PHP code:
<div id="votos">
<ul class="yourvotes">Your votes: 0</ul>
<li class="votesofothers">
User Votes: (0)</br>
User2 Votes: (0)</br>
</li>
</ul>
</div>
And then I have a Ajax call to update the database when one of the links is pressed:
$(function(){
$('.votar').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "votar.php",
data: "id="+elem.attr('iduser'),
dataType:"json",
success: function() {
window.location.reload(true);
}
});
$(document).ajaxStop(function(){
window.location.reload();
});
return false;
});
});
And this would be the code to update the values that appear in "real-time":
function mostrarvotos() {
$('#votos').load('votos.php');
setTimeout('mostrarvotos()',1000);
}
mostrarvotos();
(I originally wanted to update each of the user votes instead of updating the whole div but I couldn't manage to do it.)
So my problem is that when I add the "mostrarvotos()" function to my code the links stop working and just add a # to the url, but if I remove it everything works fine.. If you could help me with this I would greatly appreciate.

Answer 1

That's because you are not prevent the link's original action. The click handler won't catch the event when you refreshed the content with an AJAX request. Try document.on instead of your current handler:
$(document).on('click','.votar',function(e){
e.preventDefault(); //Prevent the default action
var elem = $(this);
$.ajax({
type: "GET",
url: "votar.php",
data: "id="+elem.attr('iduser'),
dataType:"json",
success: function() {
window.location.reload(true);
}
});
$(document).ajaxStop(function(){
window.location.reload();
});
return false;
});
Also note the preventDefault which prevents the defauls link action (the # in your address bar).

Answer 2

You need to delegate your click function because you are adding those links dynamically.
So do something like:
$(function () {
// delegate your dynamically loaded links
$('#votos').on('click', '.votor', function () {
var elem = $(this);
$.ajax({
type: "GET",
url: "votar.php",
data: "id=" + elem.attr('iduser'),
dataType: "json",
success: function () {
window.location.reload(true);
}
});
$(document).ajaxStop(function () {
window.location.reload();
});
return false;
});
});