jQuery HTML Button 多次触发函数

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

这是 Firebug 网络面板的屏幕截图:http://imgur.com/Z83s5fr 这是 $_POST 字符串:hours=1&studentID%5B%5D=5112244

Answer 1

您在按钮上有一个 onclick 属性，然后在您的 jQuery 中注册点击事件。因此，每次单击按钮时，您都至少向单击事件添加了一个监听器。第一次单击，添加一次，第二次，再添加 2 次，总共 4 次，但这一次，处理程序实际上会触发(它不是第一次，因为它正在注册)。

从按钮中删除 onclick 属性并完全删除该功能，因此您只有:

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