JS: javascript click event is executed twice js problem solving jquery bind click events click once performed twice problem

 javascript click event is executed twice js problem

JQuery presence in the unbind () method , first unbundling add a click event, solutions for:

$ (. "m-layout-Setting"). the unbind ( 'the Click'). the Click ( function () {
 // Here fill logic code 
})

 

------

Because the use of js code needs to add a click event after the page is loaded, the code can be found after clicking executed twice, because there are toggle effect, causing popups appear and quickly lost

Check some information and found that this is the cause bubbling, bubbling need to add a method to stop the click event code :

e.stopPropagation();

But I still found
the back found, OFF function can be released by the events on the function bound , so on before the function call at Off function in js code, it is normal :

$ ( "li.taskli"). off ( 'the Click', 'A'). on ( 'the Click', 'A', function (E) { // call off before removing the bound binding on 
// $ (document) .on ( 'click' , 'li.taskli a', function (e) {// the original writing 
the console.log ( "here Wallpaper" )
 IF ($ ( the this ) .parent (). Find ( 'div .popover '.) size ()> 0 ) 
{ 
$ ( the this ) .popover (' the destroy ' ) 
} the else { 
 var UUID = $ ( the this ) .attr (' targetuuid ' );
 var taskhtml =' <div ID = " taskview "> '+ popheadDivHtml () +' </ div> ' ;
$(this).popover({
placement:'bottom',
title:uuid,
html:'true',
content:taskhtml
}).popover('toggle');

getResultFromFile(uuid)
}
e.stopPropagation(); //阻止冒泡
})

 

Solve jquery bind click events click once performed twice problem

Locate the problem: Click twice to call the first appearance by positioning F12 browser.

Reproduce the problem:

$("#mail_span").on("click",function(){
        if($(".treeselect").children(".treeselect-up").css("display")=="none"){
            treeSelectClick();
            var $up = $(".treeselect").find(".treeselect-up");
            $up.css({
                display : "block"
            });
            $("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-top");
        }else{
            treeSelectClick();
            $("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-bottom");
        }
    }
})

 

problem solved:

$("#mail_span").on("click",function(e){
    if(!e.isPropagationStopped()){//确定stopPropagation是否被调用过
        if($(".treeselect1").children(".treeselect-up").css("display")=="none"){
            treeSelectClick();
            var $up = $(".treeselect1").find(".treeselect-up");
            $up.css({
                display : "block"
            });
            $("#mail_bottom").attr("class", "glyphicon glyphicon-triangle-top");
        }else{
            treeSelectClick();
            $("#mail_bottom") attr ( "class", "glyphicon glyphicon-Triangle-bottom." ); 
        } 
    } 
    e.stopPropagation (); // must be, otherwise e.isPropagationStopped () can not determine stopPropagation ever call 
})

 

Access to information:

event.preventDefault ()  : prevent the default behavior, you can () to determine whether the preventDefault been called up by event.isDefaultPrevented
event.stopPropagation ()  : stop the event bubbling, bubbling event is to prevent the event from bubbling to the DOM tree, do not trigger any event handler on the older elements, you can use event.isPropagationStopped () to determine whether stopPropagation been called up