如何多次触发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>

如何多次触发onclick？

How to trigger onclick multiple times?

javascript

jquery

onclick