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>