jQuery div和类冲突

Question

我的jquery ajax代码遇到了一些麻烦。 我有2个函数，一个将提交值，另一个将实时更新值。至少这是应该执行的操作。 ：P

因此，我有一个通过一些PHP代码创建的列表：

<div id="votos">
    <ul class="yourvotes">Your votes: 0</ul>
    <li class="votesofothers">
        <a href="#" class="votar" id="3124" iduser="3124" rel="Votar">User</a>  Votes: (0)</br>
        <a href="#" class="votar" id="3125" iduser="3125" rel="Votar">User2</a>  Votes: (0)</br>
    </li>
    </ul>
</div>

然后，当按下其中一个链接时，我有一个Ajax调用来更新数据库：

$(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;
    });
});

这就是更新“实时”中出现的值的代码：

function mostrarvotos() {
    $('#votos').load('votos.php');
    setTimeout('mostrarvotos()',1000);
}
mostrarvotos();

（我本来想更新每个用户的投票，而不是更新整个div，但我无法做到这一点。）

所以我的问题是，当我在代码中添加“ mostrarvotos（）”函数时，链接会停止工作，仅在URL中添加＃，但是如果我删除它，一切都会很好..如果您可以帮助我，我会非常感谢。

Answer 1

那是因为您没有阻止链接的原始操作。 当您使用AJAX请求刷新内容时，点击处理程序将不会捕获事件。 尝试使用document.on代替当前的处理程序：

$(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;
});

另请注意preventDefault ，它防止默认链接操作（地址栏中的＃）。

Answer 2

您需要委派click函数，因为您是动态添加这些链接的。
因此，请执行以下操作：

$(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;
    });
});