Solved

jquery event onclick work one time

Posted on 2013-06-27
9
632 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Title # Comments Views Activity
html5 1 44
HTML CSS and  Table design 4 67
JSON help 8 46
Check for Numeric Phone Field 14 47
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This article discusses how to implement server side field validation and display customized error messages to the client.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

732 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