Javascript - 一个表单的多个事件监听器答案

【问题标题】：Javascript - Multiple Event Listeners with One FormJavascript - 一个表单的多个事件监听器
【发布时间】：2015-05-18 20:58:34
【问题描述】：

目前，我正在从数据库中动态生成带有事件侦听器的按钮，并在单击按钮时使用这些按钮中的信息来填写表单。我遇到的问题是，如果我在点击提交之前点击了多个按钮，那么它将处理之前点击的所有按钮的操作。现在我只希望它从我点击的最后一个按钮提交数据。有没有办法只提交我点击的最后一个按钮的信息？我对 Javascript 很陌生，所以如果这是一个愚蠢的问题，我很抱歉

这是我正在尝试做的示例的 jsfiddle： https://jsfiddle.net/jviro/drmm5b48/2/

//edit item function
var buttons = [5,10,20];
var total;
var divButtons = document.getElementById("buttons");

for(var i = 0; i < buttons.length; i++){
    var aButton = document.createElement("a");
    aButton.setAttribute("href", "#");
    aButton.setAttribute("id", buttons[i]);
    aButton.setAttribute("class", "amountButtons");
    aButton.addEventListener("click", showNumber);
    var text = document.createTextNode(buttons[i]);
    aButton.appendChild(text);
    divButtons.appendChild(aButton);
}

function showNumber() {

    var clickedID = parseInt(this.id);
    var amount = document.getElementById("purchase_amount");
    amount.value = clickedID;

    //button interaction
    $( "#purchasesButton" ).click(function() {
        if(total == null){
            total = clickedID;
        }
        else{
            total = total + clickedID;
        }
        document.getElementById("total").innerHTML = "Total: " + total;
        document.getElementById("purchases").reset();
    });
}

【问题讨论】：

“最后一个按钮”是指最后一次点击保存按钮？所以如果你按 5 然后按 10 然后保存它会发送 15？然后 5 和 20 它发送 25？
为什么你在使用jQuery的时候使用addEventListener？
将一个事件处理程序绑定到另一个事件处理程序函数中几乎总是错误的。每次调用showNumber 时，都会向purchasesButton 添加另一个click 处理程序。
对不起，我所说的“最后一个按钮”是我选择的最后一个数字。当我按 5 和 10，然后点击提交按钮时，它会同时提交 5 和 10。我希望它只提交最后选择的数字（本例中的 10）@Samurai。感谢您的评论！
我对 javascript 和 jQuery（以及相关的编程）都很陌生，所以我只是使用我首先在 w3schools 或论坛上找到的任何方法。我没有意识到在处理程序中包含事件处理程序是一个坏主意。这可能是我在制作的实际应用程序中遇到的问题的一部分。您认为使用事件处理程序生成按钮并仅使用一种表单来收集数据的更好方法是什么？ @Barmar

标签： javascript jquery html forms event-handling

【解决方案1】：

在您发布的示例中，您没有在任何地方提交数据，您只是将金额相加，而不是在点击save 按钮时将其显示在页面上。

如果您不希望金额相加，而只显示最后点击的数字，请从代码中删除加法。

代替

  if(total == null){
      total = clickedID;
  }
  else{
      total = total + clickedID;
  }

随便用

  total = clickedID;

见：

https://jsfiddle.net/jviro/drmm5b48/2/

【讨论】：

【解决方案2】：

如果你想使用最后选择的值，你可以把它放在一个全局变量中。

//edit item function
var buttons = [5, 10, 20];
var total = null;
var divButtons = document.getElementById("buttons");

for (var i = 0; i < buttons.length; i++) {
    var aButton = document.createElement("a");
    aButton.setAttribute("href", "#");
    aButton.setAttribute("id", buttons[i]);
    aButton.setAttribute("class", "amountButtons");
    var text = document.createTextNode(buttons[i]);
    aButton.appendChild(text);
    divButtons.appendChild(aButton);
}

// Use jQuery to add an event binding to all the buttons at once.
$(".amountButtons").click(showNumber);

function showNumber() {
    var clickedID = parseInt(this.id);
    var amount = document.getElementById("purchase_amount");
    amount.value = clickedID;
    total = clickedID;
}

$("#purchasesButton").click(function () {
    if (total == null) {
        alert("No amount selected");
        return;
    }
    $("#total").text("Total: " + total);
    $("#purchases").reset();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons"></div>
<div>
    <form id="purchases">
        <p>how much is it?</p>
        <input type="number" name="purchase_amount" id="purchase_amount" value="">
    </form>
</div>
<input type="button" value="Save" id="purchasesButton" />

<h2 id="total">Total: </h2>

【讨论】：