How to trigger onclick multiple times?

Question

I'm trying to make a message pop up saying all changes have been saved, it works once, but then won't work a 2ed or 3rd time. code is below:

How can i make it work every time it is click?

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

And also tried this:

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

Your click handler is being called, but you dont seem to reset your #result element (ie remove the alert classes, html, etc) so you wouldn't see a change — Patrick Evans
– Patrick Evans, Commented Jan 19, 2016 at 10:25
You are doing the fadeIn/Out as soon as the document is ready, not after the click has happened. Move that code into the click handler — Patrick Evans
– Patrick Evans, Commented Jan 19, 2016 at 10:44

rrk · Accepted Answer · 2016-01-19 11:01:40Z

If you reset the changes happen during the first show and hide of the alert div and move the fadeTo code inside the click handler, it will work. See this snippet.

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

Collectives™ on Stack Overflow

How to trigger onclick multiple times?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related