jQuery-單擊函數觸發太多次

Question

我正在編寫一個函數來檢測$("input[name='AAA']")輸入是否已更改，如果輸入已更改，請單擊Apply按鈕它將彈出警報，但是我的警報消息會彈出三遍，如何避免？

HTML部分：

<ul class="form">
<li>
   <span class="clumn1">Name:</span>
   <span class="clumn2">
      <input class="text" type="text" name="AAA">
   </span>
</li>
<li>
   <span class="clumn1">Address:</span>
   <span class="clumn2">
      <input class="text" type="text" name="BBB">
   </span>
</li>
<li>
   <span class="clumn1">Date:</span>
   <span class="clumn2">
      <input class="text" type="text" name="CCC">
   </span>
</li>
</ul>

<a class="submitBtn" onclick="apply()" href="#">Apply</a>

jQuery部分：

$(document).ready(function () {
    $("input[name='AAA']").each(function() {
        var stuff = $(this);
        stuff.data('oldValue', stuff.val());
        stuff.bind("input", function(event){
            if (stuff.data('oldValue') != stuff.val()) {
                $(".submitBtn").on("click", function () {
                    alert("Your changed name is:" + stuff.val())
                });
            }
        }); 
    });
});

Answer 1

每次更改input[name='AAA']值時，都將為按鈕綁定click事件。

您應該注冊一次click ，內部事件處理程序中將比較新舊輸入值：

var stuff = $("input[name='AAA']");
var stuff_val = stuff.val();
$(".submitBtn").on("click", function () {
    if(stuff_val !== stuff.val()){
        stuff_val = stuff.val();
        alert("Your changed name is:" + stuff_val)
    }
});

 var stuff = $("input[name='AAA']"); var stuff_val = stuff.val(); $(".submitBtn").on("click", function () { if(stuff_val !== stuff.val()){ stuff_val = stuff.val(); alert("Your changed name is: " + stuff.val()); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="form"> <li> <span class="clumn1">Name:</span> <span class="clumn2"> <input class="text" type="text" name="AAA"> </span> </li> <li> <span class="clumn1">Address:</span> <span class="clumn2"> <input class="text" type="text" name="BBB"> </span> </li> <li> <span class="clumn1">Date:</span> <span class="clumn2"> <input class="text" type="text" name="CCC"> </span> </li> </ul> <a class="submitBtn" href="#">Apply</a>