Accumulation and repeat binding events of click event in JS

Environment: In a dynamic module box, since the new and edited styles are the same, I let the two operations share a modal box and a submit button. But the two operations are processed in two different background addresses, then the problem comes, when I add and edit, I bind different click events to the submit button respectively. My ideal is that after clicking add, the click event of submit is submitted to the insert in the background, and after clicking edit, the click event of submit is submitted to the update in the background. However, during the actual test, a fatal problem was found, that is, the page is loaded asynchronously. After clicking submit, multiple click events will be executed as the number of clicks increases.

 

There is a click upload function in the add or edit event, and a bug will appear in the upload. The code is as follows:

 

function test(){
    var i = 1;
    $("#upload").click(function() {
        alert(i++);
	var barCode2 = trimStr($("#barCode").val());
	if(barCode2 == ""){
		$.alert("Please enter the product code first, and then upload the picture");
		return false;
	}
    }
}

 When you click upload for the first time, a prompt box "1" and "Please enter the product code first, and then upload the picture" will pop up. At this time, it is normal to cancel editing or submit;

 

When you enter the page for the second time and click upload, a prompt box "2" will pop up, and then a prompt box "1" will pop up, followed by the same "Please enter the product code first, and then upload the picture";

When you enter the page for the third time and click upload, a prompt box "3", "2", "1" will pop up, please enter the product code first, and then upload the picture "....;

When you enter the page for the fourth time and click upload, a prompt box "4", "3", "2", "1" will pop up, please enter the product code first, and then upload the picture "....;

the fifth time.........

 

When this kind of problem occurs, it feels like the bubbling and superposition of the past. I searched many times on the Internet and finally found that the problem belongs to the repeated binding of the click event, so I recorded my own error and solution, which does not represent a public solution:

When returning false for the first time, the pop-up event will be executed;

When returning false for the second time, it will look for the event of its previous layer (which can be understood as the parent class), know that return false occurs, and then trigger its own click event and execute the pop-up event;

The third click event binds two outputs "3"" and the pop-up box, and then bubbles and executes "2", "1" and two pop-up boxes of the parent class;

...........

So it feels that every time the upper layer will record the trigger result of the click event of the lower layer, and the result will be triggered at the next trigger. So as the number of clicks increases, the results are also increasing, because we don't want to trigger the previous click event, so we need to clear the binding itself every time the click event occurs. The code is as follows:

 

function test(){
    var i = 1;
    $("#upload").unbind('click').click(function() {
        alert(i++);
	var barCode2 = trimStr($("#barCode").val());
	if(barCode2 == ""){
		$.alert("Please enter the product code first, and then upload the picture");
		return false;
	}
    }
}

 

The result of this output is that i will increment by 1 every time I want, and only one will be output. . solve.