如何防止多个加载PHP脚本调用JS脚本？

Question

我在Ajax上为用户评论创建了一个简单的投票系统（+和 - ）。一页有50条发表评论，您可以为每个“加号”或“减号”投票。这些数据通过PHP脚本发送到数据库。但是，如果用户投票，则PHP脚本被调用50次 - 它在Chrome开发人员工具中可见。有错误 - 比预期更多的价值。这是我的代码（两个DIV按钮和脚本）。

请告诉我如何将代码更改为脚本（up_vote.php或down_vote.php）只调用一次。

<script type="text/javascript" src="raitings/jquery.js"></script> 
<script type="text/javascript">$(function() {$(".vote").click(function() { 

var id = $(this).attr("id"); 
var name = $(this).attr("name"); 
var dataString = 'id='+ id ; 
var parent = $(this); 

if(name=='down') 
{ 
$(this).fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">'); 
$.ajax({type: "POST", url: "raitings/down_vote.php", data: dataString, dataType : "html", cache: false, success: function(html) 
    { parent.html(html);} 
}); 
} 
else 
{ 
$(this).fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">'); 
$.ajax({type: "POST", url: "raitings/up_vote.php", data: dataString, dataType : "html", cache: false, success: function(html) 
    { parent.html(html); 
    } }); 
} 
return false; 
    }); 
}); 
</script> 

//php code below; 
echo "<div class=\"box1\"><div class=\"up\"><a href=\"#\" class=\"vote\" title=\"+ 1\" alt=\"+ 1\" id=".$row["id"]." name=\"up\">".$up."</a></div>" 
."<div class=\"down\"><a href=\"#\" class=\"vote\" title=\"- 1\" alt=\"- 1\" id=".$row["id"]." name=\"down\">".$down."</a></div></div>\n"; 

Answer 1

使用jQuery，重要的是要知道事件是可堆叠的，即使事件完全相同也是如此。例如：

$(".vote").click(function() { alert("hi"); }); 
$(".vote").click(function() { alert("hi"); }); 
$(".vote").click(function() { alert("hi"); }); 

如果我们逐字跑这三条线，我们将有3个不同的事件连接。也就是说，通过单击vote类中的元素，我们会依次获得3个警报。另外，通常情况下，通过ajax加载的页面带有父页面相同的<script></script>块，并且在这种情况下，代码无意间会在每次调用ajax时被一次又一次地处理。

虽然我无法准确指出您提供的代码究竟是如何发生的，但似乎这是最可能的情况：您的点击处理程序事件正在多次加载，因此一次单击就会触发几个ajax调用。

当这表现为我在评论中提到的更换快速和肮脏的解决方案：

$(".vote").click(function() 

通过：

$(".vote").unbind("click").click(function() 

这得益于unbind功能，迫使其放弃先前附加事件每次连接一个新代码时，无论代码处理了多少次，都可以防止连接多个事件。

虽然这会起作用，但更好的解决方案当然是找到多次加载js代码的位置，并确保它只加载一次。

Answer 2

$（ “投票”）。每个（函数（）{$（本）。点击（clickHandler事件....等应该解决您的问题。

Answer 3

我不完全了解您的版本的作品，但我会做类似这样的：

<a href="JavaScript:vote_up(200);"> + </a> 
<a href="JavaScript:vote_down(200);"> - </a> 

凡200将是评论的唯一ID 然后有一个vote_up（）和vote_down（）函数在JavaScript中定义并添加AJAX 这样，它不应该多次调用脚本+/-按钮被点击。

Answer 4

在向您发送ajax请求之前，您可以禁用按钮。

// Sample: 

$(function() { 
    $(".vote").click(function() { 

    var id = $(this).attr("id"); 
    var name = $(this).attr("name"); 
    var dataString = 'id='+ id ; 
    var parent = $(this); 

    parent.fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">'); 

    if(name=='down') 
    { 
     $.ajax({ 
     type: "POST", 
     url: "raitings/down_vote.php", 
     data: dataString, 
     dataType : "html", 
     cache: false, 
     beforeSend: function() { 
      parent.attr("disabled", true); 
     }, 
     success: function(html) { 
      parent.html(html); 
     } 
     }); 
    } else {  
     $.ajax({ 
     type: "POST", 
     url: "raitings/up_vote.php", 
     data: dataString, 
     dataType : "html", 
     cache: false, 
     beforeSend: function() { 
      parent.attr("disabled", true); 
     }, 
     success: function(html) { 
      parent.html(html); 
     } 
     }); 
    } 

    return false; 
    }); 
});