Question

我正在创建一个显示一列复选框的HTML表单，点击提交并且事件将被jQuery函数拾取。但是，在检查Firebug网络面板中的功能之后，我注意到，即使只点击一次按钮，该功能也会多次触发！任何想法为什么？

HTML：

echo "<form id='massHoursSubtraction'>"; 
echo "How many hours to subtract? <input type='text' name='hours'><br />"; 
$entries = 1; 
while($row = mysql_fetch_array($members)) { 
    $studentID = $row['studentid']; 
    echo "<input type='checkbox' name='studentID[]' id='' value='$studentID'>$studentID"; 
    echo "<br />"; 
    $entries++; 
} 
echo "<input type='button' id='submitValues' value='Submit' onclick='javascript:getHours($entries);' />"; 
echo "</form>"; 

的Javascript：

function getHours(numberOfEntries) { 
$(document).ready(function() { 
    $("#submitValues").click(function(){ 
     var str = $("#massHoursSubtraction").serialize(); 
     alert("How many times?");   
     $.post("output.php", str);         
    }); 
}); 
} 

这里的萤火虫网面板的截图：http://imgur.com/Z83s5fr 这是$_POST字符串：hours=1&studentID%5B%5D=5112244

Answer 1

您同时拥有一个onclick属性在按钮上，然后在你的jQuery中，你然后寄存器单击事件。因此，每次单击该按钮时，都会为click事件添加至少一个以上的侦听器。第一次点击，你添加一次，第二次，你再添加2次，总共4次，但这次，处理程序实际上会触发（它不是第一次注册）。

完全取下按钮onclick属性和删除功能，这样你只需要：

$(document).ready(function() { 
    $("#submitValues").click(function(){ 
     var str = $("#massHoursSubtraction").serialize(); 
     alert("How many times?");   
     $.post("output.php", str);         
    }); 
}); 

Answer 2

那是因为你每次点击的元素submitValues时间它附加一个单击处理程序存在。这是你的额外事件来自的地方。而应该只是这样做：

echo "<input type='button' id='submitValues' value='Submit' />" 

，然后当的document.ready这里发出一次附加的事件处理程序：

$(document).ready(function() { 
$("#submitValues").click(function(){ 
    var str = $("#massHoursSubtraction").serialize(); 
    alert("How many times?");   
    $.post("output.php", str);         
}); 
}); 

Answer 3

把下面一行您呼叫

$("#IdofButton").removeAttr('onclick'); 

里面的功能

这将删除按钮的点击功能，所以它不能多次触发该功能。