A bug where Ajax and Bootstrap are mixed with hand remnants

The front end is like this

The original logic is to click Submit, the Modal box appears, and then click on the comment after the data submitted to the backend with Ajax, it looks OK, but the hand is two buttons nested together,

(The code is not complete)

The wrong code

$ ("#回复按钮"). On (' click ', function () {//Get information about the reply object;        $ ("Comment in Modal Box"). On (' click ' function () {//Get the nickname and content in the popup box.) Ajax ({transfer data;    }); )};)};

and then the problem comes., we can see this effect

Comments 1 Normal, comments 2 showing two times, reviews three tests showed three times.

The problem is on the nesting of two button on click events

Press the external button for the first time to start listening for the internal button comment is pressed, the second time the external button is pressed, the first external button listens for the internal button to be clicked, The second external button is also listening, so the server post two times data, and so on ...

Solution to separate the click events for two buttons

Correct code

$ ("#回复按钮"). On (' click ', function () {
Obtain the information of the reply object;
)};

$ ("comments in pop-up Box"). On (' click ' function () {
Get the nickname and content in the popup box
. Ajax ({
Transmitting data;
});

)};

A bug where Ajax and Bootstrap are mixed with hand remnants