javascript - jq click event repeated execution problem

Question

Help, the elements dynamically generated by jq need to be bound with on to click events to take effect, and the function that executes on also has click events, and then the function is executed twice. How to solve this situation?

Answer 1

Use the event object to find the target you really want to click

Answer 2

In fact, it is nothing more than the event being bound twice or the event bubbling;
1. Unbind the event and bind it again

$(ele).unbind('click').click(function() {
        // to do    
})

2, Cancel bubbling

$(ele).click(function(e){
   e.stopPropagation();
});

Answer 3

Remove monitoring first, then monitor
.off(handler).on(handler)

Answer 4

Is this bubbling? e.stopPropagation()

Answer 5

off Unbind first, then bind

Answer 6

$('document').unbind('click').click(function() {
            //dosomething
            })

Answer 7

function removeMaopao(ev){
        var eEvent = ev || event;
        eEvent.stopPropagation() && eEvent.stopPropagation;
        return false;
    }

Answer 8

The person above made it clearer.
1. Found the problem
1.1 is bound twice, because the dynamically generated element is bound to an event, but in this event the previously bound event is called again

$('document').unbind('click').click(function() {
    //取消绑定的回调事件
})

1.2 It is still caused by the bubbling of events (if you are not familiar with bubbling, please read the relevant information first)

$('document').click(function(e){
   //取消事件冒泡
   e.stopPropagation();
});

2. Dynamically generated elements do not necessarily need to use dynamic binding events

Event handlers using the delegate() method work on current or future elements (such as new elements created by scripts).
Click here to view detailed documents: http://www.w3school.com.cn/jq...

$("p").delegate("button","click",function(){
  $("p").slideToggle();
});

Answer 9

Remember to turn off() after on()