In the two previous answers, people (correctly) suggest that you rebuild your code to avoid registering the event handler inside another event handler. However, since you do not accept these answers, I believe that this does not fully answer the question.
What you want to do is simply submit the contents of the form when you click the "Next" button. At the same time, this button is not part of the form, so just clicking it will not cause the "send" event. This way you fire the event manually.
Now, what is strange in your description is that your ajax requests double each time you click. Usually with each click you will have only one request added. See my fiddle here , which is a simplified version of your code.
var form = $('form'); $(document).on('click', '.next', function(){ form.on('submit', function() {
So the question is: where do you register the handler with $(document).on("click",".next", function() ? You need to make sure that this handler is registered only once. To do this, you can put an alert('registering handler') immediately before this line in your code for verification. The correct sequence for registering event handlers is displayed in this modified fiddle . Code:
var form = $('form'); $(document).on('click', '.next', function(){ form.trigger('submit') }) form.on('submit', function() {
So, can you try what I suggested and tell me the result?
PS I'm not sure why you need to start submitting a form at all. For your ajax request, you serialize the form and cancel the original view (you return false ;). Thus, I would recommend not using the "send" event at all and just doing all the work in the "click" handler.
UPDATE (after additional information has been added in the comments below)
So, the second part of the problem is as follows. With each "next" click, you attach new event listeners, and you replace the html of your tabs with the following $('#tab2').html(data); , and data contains not only markup, but also js code that is executed upon insertion (btw, I did not know that it works like that, it's nice). I think what you expect is that after removing the markup (html), the corresponding event listeners will also be deleted. But actually it is not. What for? Since you are delegating your event to listening to document with code starting with:
$(document).on("click",".next", function()
Here $(document) is what you attach your listener to. Instead of going into details, I highly recommend that you check out this original jquery explanation of event delegation .
So how do you fix this? There are several different ways. Perhaps the simplest (minimal amount of code editing) is to remove the event listeners before you do .html(data) . Another way, also simple, is to record
$('.next').on("click", function(),
as you did in qualification_history.php. Thus, you attach events to the element itself, and not to the document. The only thing you want to make sure is that there is a corresponding DOM element before executing this code (so you can put your code after markup).