JS dynamic loading repeated binding

This time I will bring you JS dynamic loading and repeated binding. What are the precautions for JS dynamic loading and repeated binding? The following is a practical case, let's take a look.

Preface

When adding a piece of data, dynamic loading was used to display it on the interface. Later, a serious bug was discovered. Take this note I made as an example. When I After adding a piece of data, and then click

Delete, I will be prompted whether to delete it, as shown below:

But when I add more than two pieces of data, After deleting the item, you will be prompted 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);

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Angular parent component calls the child component in detail

Instructions for newbies to vue

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