JavaScript dynamic loading duplicate binding problem

This article mainly introduces the problem of repeated binding of JavaScript dynamic loading. It is very good and has reference value. Friends in need can refer to it

Preface

When adding a piece of data, dynamic loading is used to display it on the interface. Later, a serious bug was discovered. Take this note I made as an example. When I add a piece of data and then click delete, it prompts whether Delete, as shown below:

#But when I add more than two pieces of data, whichever piece is deleted will prompt several times to confirm the deletion.

After investigation, I finally found the problem.

Text

When content is added dynamically, the events that need to be used in the added p are usually written, such as click events/ Chang events, etc. Take my deletion event as an example. Since the deletion event must be written under the event of adding a note, when the first piece of data is added, it is bound once, when the second piece of data is added, it is bound once, and when the nth piece of data is added, it is bound once. , n times of deletion events have been bound, so when deleting the nth piece of data, you will be prompted n times to confirm the deletion.

Now that the cause of the error has been found, it can be solved. Before binding the delete event, just unbind the last bound event.

Code:

//解绑
$(".deletebtn").off("click");
$(".update").off("change");
//绑定
$(".deletebtn").bind('click', delete_click);
$(".update").bind('change', change_fonts);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solution to the problem of garbled Chinese question marks when passing json to the front desk using ajax

AJAX is used Determine whether the user is registered

ajax implements asynchronous file or image upload function

##

The above is the detailed content of JavaScript dynamic loading duplicate binding problem. For more information, please follow other related articles on the PHP Chinese website!