Trying to remove two clicks

I have the following code in my PHP file:


<p id = "submitParagraphID" style="display: none">Thank you for submitting your request.</p>
<div class="row"style="margin-top: 15px;" >
	<div class="col-sm-3" id="buttonDiv">
	<button  class="btn btn-primary" onclick="submitUsingjQuery()">Submit</button>
	</div>
</div>

And I am using the following javascript function and jQuery inside it to handle onclick:

function submitUsingjQuery(){  

   // alert("Function works?"); // This works with one click only
	
$("#button").click(function() {
			$("#submitParagraphID").show("fast");
	}); 
       
		
  }

It’s taking me two clicks to print the message of the paragraph Thank you for submitting your request. which I think is because of the first call to submitUsingjQuery() function and then click handler inside. Is there any way I can avoid this and make it to one click?

omit the outer click handler.

To be a little more precise: The reason it takes 2 clicks is that the first click is bound to the function “submitUsingjQuery”. That function, when called (IE: Your first click), then assigns a click handler to $(“#button”). Note that it doesnt TRIGGER the handler, it just assigns it.
Then your second click comes in, and it triggers both submitUsingjQuery (again), and (separately) the $(“#button”) trigger that is now waiting for the click.
As Dormilich says, omit the outer click handler by removing the function entirely (putting the $(“#button”) declaration in the main body of your javascript), and remove the onclick handler from the element. With the declaration in the main body, as soon as the script loads, it will put the click trigger onto the button, and your first click will fire the internal function you’ve declared.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.