如何防止多個加載PHP腳本調用JS腳本？

我在Ajax上爲用戶評論創建了一個簡單的投票系統（+和 - ）。一頁有50條發表評論，您可以爲每個「加號」或「減號」投票。這些數據通過PHP腳本發送到數據庫。但是，如果用戶投票，則PHP腳本被調用50次 - 它在Chrome開發人員工具中可見。有錯誤 - 比預期更多的價值。這是我的代碼（兩個DIV按鈕和腳本）。如何防止多個加載PHP腳本調用JS腳本？

請告訴我如何將代碼更改爲腳本（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";

來源

2012-10-25 Astraport

不能重現：http://jsfiddle.net/jxUKN/有沒有其他的js代碼，你正在省略？ – Mahn

或者你是否通過ajax加載每個人的評論？ – Mahn

我通過PHP加載所有評論。id同樣的兩個按鈕，但不同的所有評論 – Astraport

使用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代碼的位置，並確保它只加載一次。

來源

2012-10-25 20:00:42 Mahn

$（「投票」）。每個（函數（）{$（本）。點擊（clickHandler事件....等應該解決您的問題。

來源

2012-10-25 18:16:41 theprogrammer

不幸的是沒有解決 – Astraport

你是否加載這個腳本的每個評論？如果是這樣的話，你不應該加載JavaScript每次，但只有一次 – theprogrammer

不，只加載一次 – Astraport

我不完全瞭解您的版本的作品，但我會做類似這樣的：

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

凡200將是評論的唯一ID 然後有一個vote_up（）和vote_down（）函數在JavaScript中定義並添加AJAX 這樣，它不應該多次調用腳本+/-按鈕被點擊。

來源

2012-10-25 18:18:53 adrianTNT

id =「。$ row [」id「]。」 - 評論的唯一ID – Astraport

在向您發送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; 
    }); 
});

來源

2012-10-25 18:18:54 FabianoLothor

但是用戶應該能夠在投票後爲其他評論投票一個。 – Astraport

如何防止多個加載PHP腳本調用JS腳本？

回答

相關問題