A bug in the combination of ajax and bootstrap

A bug in the combination of ajax and bootstrap

The front-end is like this.

The original logic is to click submit, the modal box appears, and then click comment.Submitting data to the backend Using ajax seems okay, but the two buttons are nested with each other,

(The code is incomplete)

Error Code

 

$ ("# Reply button "). on ('click', function () {// obtain the information of the reply object; $ ("comment in the modal box "). on ('click' function () {// obtain the nickname and content in the pop-up box. ajax ({Transfer Data ;});)};)};

 

Then the problem arises. We can see this effect.

 

 

 

Comments 1 are normal, comments 2 are displayed twice, and comments 3 are tested three times

This problem lies in the nesting of two button on click events.

PressExternal button replyIt starts to listen to whether the internal button comment is pressed, the second time the external button is pressed, the first time the external button is clicked within the listener, the second time the external button is also listening, so the server will post the data twice, and so on ........

Solution,Separate the click events of two buttons

Correct code

$ ("# Reply button"). on ('click', function (){
// Obtain the response object information;
)};

$ ("Comment in the pop-up box"). on ('click' function (){
// Obtain the nickname and content in the pop-up box
. Ajax ({
Transmit data;
});

)};