Question

我正在尝试弹出一条消息，说明所有更改都已保存，它可以运行一次，但之后无法正常运行2次或第3次。代码如下：

每次点击时如何才能使其正常工作？

$(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代码移动到单击处理程序中，它将起作用。请参阅此片段。

＆＃13;

$(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('');
   });
}

＆＃13;

.faChkRnd{margin-left:25px;}

＆＃13;

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

＆＃13;

如何多次触发onclick？

1 个答案: