Solved

jquery event onclick work one time

Posted on 2013-06-27
9
610 Views
Last Modified: 2013-06-27
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
Comment
Question by:bruno_boccara
  • 4
  • 3
  • 2
9 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39280798
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
 

Author Closing Comment

by:bruno_boccara
ID: 39280811
Many thanks for your quick answer .....
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39280821
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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39280824
Hmm very quick reply/accept...
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39280835
@mplungjan - If it works, it works... ;)
0
 

Author Comment

by:bruno_boccara
ID: 39280848
the first solution it works perfectly ... (:-)

So I gave him the points ....

Many thanks to you too.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39280945
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39280953
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39281117
Hmm. that does make sense. Oh well I should have posted first and fiddled later ;)
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question