1

我正在创建一个显示一列复选框的 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

4

3 回答 3

5

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

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

$(document).ready(function() {
    $("#submitValues").click(function(){
        var str = $("#massHoursSubtraction").serialize();
        alert("How many times?");           
        $.post("output.php", str);                                  
    });
});
于 2013-04-07T07:47:22.300 回答
4

那是因为每次您单击元素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);                                  
 });
});
于 2013-04-07T07:47:22.743 回答
0

将以下行放入您正在调用的函数中

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

这将删除按钮的单击功能，因此它不能多次触发该功能。

于 2014-10-27T06:56:13.360 回答