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

按钮和jQuery上都有onclick属性，然后注册 click事件。因此，每次单击该按钮时，都会向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');

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

jQuery HTML Button多次触发函数

3 个答案: