Question

目前，我正在使用数据库中的事件侦听器动态生成按钮，并在单击按钮时使用这些按钮中的信息填写表单。我遇到的问题是，如果我在点击提交之前单击多个按钮，那么它将处理之前单击的所有按钮的操作。现在我只想从我点击的最后一个按钮提交数据。有没有办法只提供我点击提交的最后一个按钮的信息？我对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();
    });
}

Answer 1

在您发布的示例中，您无法在任何地方提交数据，只需在点击save按钮时在页面上添加金额而不是在页面上显示数据。

如果您希望金额不加在一起，只显示最后点击的数字，则从代码中删除添加。

而不是

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

只需使用

  total = clickedID;

请参阅：

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

Answer 2

如果要使用最后选择的值，可以将其放在全局变量中。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript - 具有一个表单的多个事件监听器

2 个答案: