javascript - 如何多次触发onclick？

Question

我试图弹出一条消息，提示所有更改已保存，它可以工作一次，但第二次或第三次就无法工作。代码如下:

如何让它在每次点击时都起作用？

$(document).ready(function() {
   $(".faChkRnd").on('click', function() {
     $("#result").html('All changes have been saved!');
     $("#result").addClass("alert alert-fmaj");
   });
   $("#result").fadeTo(4000, 500).fadeOut(1000, function() {
     $("#updateunit").alert('close');
   });
   $("#updateunit").submit(function() {
     return false;
   });
});

function clearInput() {
   $("#updateunit :input").each(function() {
     $(this).val('');
   });
}

还尝试了这个:

$(document).ready(function() {
   $(".faChkRnd").on('click', function() {
     $("#result").html('All changes have been saved!');
     $("#result").addClass("alert alert-fmaj");
   });
   $("#result").fadeTo(4000, 500).fadeOut(1000, function() {
     $("#updateunit").alert('close');
     $("#result").removeClass("alert alert-fmaj"); 
   });
   $("#updateunit").submit(function() {
     return false;
   });
});

function clearInput() {
   $("#updateunit :input").each(function() {
     $(this).val('');
   });
}

FIDDLE

Answer 1

如果您重置警报 div 首次显示和隐藏期间发生的更改，并将 fadeTo 代码移至点击处理程序内，它将起作用。请参阅此片段。

$(document).ready(function() {
   $(".faChkRnd").on('click', function() {
     $("#result").stop().html('').removeClass("alert alert-fmaj"); 
     $("#result").html('All changes have been saved!');
     $("#result").addClass("alert alert-fmaj in")
     		.show().css('opacity',1);
     $("#result").fadeTo(1000, 500).fadeOut(1000, function() {
       //$("#updateunit").alert('close');
       $("#result").html('').removeClass("alert alert-fmaj"); 
     });
   });
   $("#updateunit").submit(function() {
     return false;
   });
});

function clearInput() {
   $("#updateunit :input").each(function() {
     $(this).val('');
   });
}

.faChkRnd{margin-left:25px;}

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<input type="checkbox" class="faChkRnd" name="likebox" id="like"> 
<input type="checkbox" class="faChkRnd" name="likebox" id="like"> 
<input type="checkbox" class="faChkRnd" name="likebox" id="like"> 
<input type="checkbox" class="faChkRnd" name="likebox" id="like"> 

<center><div id="result"></div></center>