jQuery - click function firing too many times

Question

I'm writing a function detect if $("input[name='AAA']") input has changed, and if input changed, click apply button it will popup alert, but my alert message popup three times, how to avoid it?

HTML part:

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

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

You're binding click event for the button every time the input[name='AAA'] value is changed.

You should register click once and inside event handler compare old and new input value:

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>