• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 729
  • Last Modified:

jquery event onclick work one time

Hello,
I have a problem. I want to catch each event onclick on a button but it only work one time ...

here the code  (html/php/jquery):
<form align="center" action="InfoCommande.php" method="POST" name="InfoCommande" id="InfoCommande">
	<input type="hidden" name="pDevis" value="<? echo $pDevis; ?>">
	<TEXTAREA  name="InfoCommande" value="" cols="50" rows="2" wrap="physical"><? echo $Int[0];?></TEXTAREA>
	<div id="r" style="display: inline;" > <input type="button" id="action" value="Ok" class='newSmallbouton' >  </div>
</form>


 <script>
      $(function() {
        $('#action').on('click', function(event) {
        	$('#r').html('<img src="img/ajax-loader.gif">');
       		setTimeout(function() {
  				$('#r').html('<input type="button" id="action" value="Ok" class="newSmallbouton"  >');}, 1000);
      });
      });
</script>

Open in new window

0
bruno_boccara
Asked:
bruno_boccara
  • 4
  • 3
  • 2
1 Solution
 
Chris StanyonCommented:
You are adding the click event to your #action button when the page loads and then you destroy it and re-create it so the click event is no longer bound to it. You need to delegate the click event to something your don't destroy, like the InfoCommande form:

<script>
    $(function() {
        $("#InfoCommande").on("click", "#action", function(event){
        ...

Open in new window

0
 
bruno_boccaraAuthor Commented:
Many thanks for your quick answer .....
0
 
Michel PlungjanIT ExpertCommented:
You need to re-attach the event handler to the removed button.

Instead simply do this:

DEMO

<form align="center" action="InfoCommande.php" method="POST" name="InfoCommande" id="InfoCommande">
	<input type="hidden" name="pDevis" value="<? echo $pDevis; ?>">
	<TEXTAREA  name="InfoCommande" value="" cols="50" rows="2" wrap="physical">bla</TEXTAREA>
	<div id="r" style="display: inline;" > <input type="button" id="action" value="Ok" class='newSmallbouton' > 
        <img src="http://www.gseforsale.aero/images/ajax-loader.gif" id="throbber" style="display:none" />
    </div>
</form>

Open in new window

$(function() {
  $('#action').on('click', function(event) {
    $('#action').hide();
    $("#throbber").show();  
    setTimeout(function() {
      $("#throbber").hide();  
      $('#action').show();},
    1000);
  });
});

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
Hmm very quick reply/accept...
0
 
Chris StanyonCommented:
@mplungjan - If it works, it works... ;)
0
 
bruno_boccaraAuthor Commented:
the first solution it works perfectly ... (:-)

So I gave him the points ....

Many thanks to you too.
0
 
Michel PlungjanIT ExpertCommented:
The reason I was grumbling was that I did not post the initial solution because I did not like it since it is needlessly inserting and removing elements from the page so I went to write a better one but was too late.
0
 
Chris StanyonCommented:
I wouldn't say needlessly - it inserts a 'loading' image when something is loading and removes it once it's done - seems logical to me.

Always having a 'loading' image in the DOM seems a little needless - think semantic markup! Makes much more sense to bring in elements when you need them and remove when you don't.

That's the thing - there's always more than one way to do it :)
0
 
Michel PlungjanIT ExpertCommented:
Hmm. that does make sense. Oh well I should have posted first and fiddled later ;)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now