Jquery div和类冲突答案

【问题标题】：Jquery div and class conflictJquery div和类冲突
【发布时间】：2014-11-25 12:31:16
【问题描述】：

我的 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 中添加一个 #，但如果我删除它，一切正常。如果你能帮助我我将不胜感激。

【问题讨论】：

你为什么使用 AJAX 并重新加载页面？

标签： php jquery html ajax class

【解决方案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，它会阻止默认链接操作（地址栏中的#）。

【讨论】：

非常感谢！那完成了工作！ ;)
@SteveGarret 这称为委托，在处理动态内容时应始终委托（如 S.Pols 和 putvande 所做的）。但我认为你的问题是你忘记了e.preventDefault()。

【解决方案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;
    });
});

【讨论】：