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（）”函数添加到我的代码时，链接停止工作，只需在网址中添加一个＃，但是如果我删除它一切正常..如果你可以帮助我我非常感谢。

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

您需要委派点击功能，因为您要动态添加这些链接所以做一些像：

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

Jquery div和class冲突

2 个答案: