How to solve the problem of jquery's on binding click event being executed twice

When using .on() in jquery to add a click event to a newly added element on the page, click on the event source and the bound event will be executed twice. The alert here will Executed twice, correspondingly the array deletion is also executed twice, the specific code is as follows (where .tabDel is a newly generated element after the page is loaded, so ordinary $('.tabDel).click(function(){}) cannot be used Method to add click event):

$('.right').on('click','.tabDel',function(){//删除所加 tab 节点的函数
            alert('tab的索引：'+$(this).parents('.contentLi2').index());            var iNum1 = $(this).parents('.contentLi2').index();            var iNum2 = $(this).parents('.anElement').index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents('.anElement').remove();
        });

There are probably two solutions found on the Internet:
1. Before binding the click event with on, unbind the event, that is,

$('.right').off('click','.tabDel').on('click','.tabDel',function(){//删除所加 tab 节点的函数
            // alert('tab的索引：'+$(this).parents('.contentLi2').index());
            var iNum1 = $(this).parents('.contentLi2').index();            var iNum2 = $(this).parents('.anElement').index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents('.anElement').remove();
        });

2. Unbind after the on-bound click event is executed, using unbind(), that is:

$('.right').on('click','.tabDel',function(){//删除所加 tab 节点的函数
            // alert('tab的索引：'+$(this).parents('.contentLi2').index());
            var iNum1 = $(this).parents('.contentLi2').index();            var iNum2 = $(this).parents('.anElement').index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents('.anElement').remove();
        });
        $('.right .tabDel').unbind('clock');

However, this does not solve the problem. The situation I encountered is also written here After that, the alert will not be executed. The reason is because I just said: '.tabDel' is an element generated later on the page and cannot be directly bound to the event. The syntax of unbind() is:

$(selector).unbind(event,function)

So I started Looking for other ways to solve the problem, I later discovered that bubbling was not prevented when on was bound to the event. After adding return false to the code to prevent bubbling, the event ran normally. The code is as follows:

 $('.right').on('click','.tabDel',function(){//删除所加 tab 节点的函数
            // alert('tab的索引：'+$(this).parents('.contentLi2').index());
            var iNum1 = $(this).parents('.contentLi2').index();            var iNum2 = $(this).parents('.anElement').index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents('.anElement').remove();            return false;
        });

So far The code can run normally. The culprit of the problem is bubbling, but the blogger looked in the wrong direction at first.
However, the method to prevent bubbling is not only return false, but also event.stopPropagation(). There is a difference between these two methods. In simple terms:
event.stopPropagation() will prevent the event. Bubbles up, but does not prevent the event itself;
return false not only prevents the event from bubbling up, but also blocks the event itself.
To learn more about the differences between these two methods, please find relevant information.

Related recommendations:

About js index subscript li collection binding click event instance sharing

jQuery implementation when clicked back Binding click events when pressing the car button_jquery

JavaScript method to bind click events (onclick) to buttons_javascript skills

The above is the detailed content of How to solve the problem of jquery's on binding click event being executed twice. For more information, please follow other related articles on the PHP Chinese website!