바인딩 클릭 이벤트가 두 번 실행될 때 jquery의 문제를 해결하는 방법-JS 튜토리얼-php.cn

바인딩 클릭 이벤트가 두 번 실행될 때 jquery의 문제를 해결하는 방법

小云云

풀어 주다： 2018-03-17 11:58:34

원래의

2139명이 탐색했습니다.

jquery에서 .on()을 사용하여 페이지에 새로 추가된 요소에 클릭 이벤트를 추가할 때 이벤트 소스를 클릭하면 바인딩된 이벤트가 두 번 실행되며, 그에 따라 배열 삭제도 실행됩니다. 두 번, 구체적인 코드는 다음과 같습니다. (.tabDel은 페이지가 로드된 후 새로 생성된 요소이므로 일반적인 $('.tabDel).click(function(){}을 사용할 수 없습니다. ) 클릭 이벤트를 추가하는 방법):

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

로그인 후 복사

Go online 아마도 두 가지 해결책을 찾고 있습니다.
1. 클릭 이벤트를 바인딩하기 위해 on을 사용하기 전에 이벤트 바인딩을 해제합니다. 즉,

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

로그인 후 복사

2. 바인딩을 해제하려면 다음을 수행합니다. on-bound click 이벤트가 실행되면 unbind()를 사용하세요. 즉:

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

로그인 후 복사

그러나 이것이 문제를 해결하지 못하는 이유는 이 글을 작성한 후에 경고가 실행되지 않는다는 것입니다. 방금 말했습니다: '.tabDel'은 페이지에서 나중에 생성된 요소입니다. 이벤트는 직접 바인딩될 수 없으며 unbind() 구문은 다음과 같습니다.

$(selector).unbind(event,function)

로그인 후 복사

그래서 저는 문제에 대한 다른 해결책을 찾기 시작했고 나중에 on이 이벤트에 바인딩되어 있을 때 버블링이 방지되지 않는 것을 발견하여 코드에 return false를 추가했습니다. 버블링을 방지한 후 이벤트가 정상적으로 실행되었습니다.

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

로그인 후 복사

지금까지는 코드가 정상적으로 실행될 수 있습니다. 문제의 범인은 버블링인데 블로거는 처음에 엉뚱한 방향을 바라보았습니다.
그러나 버블링을 방지하는 방법은 단순히 false를 반환하는 것이 아니라 event.stopPropagation()도 있습니다. 간단히 말해서
event.stopPropagation()은 이벤트가 버블링되는 것을 방지하지만 그렇지 않습니다.
return false 이벤트가 발생하는 것을 방지할 뿐만 아니라 이벤트 자체도 차단합니다.
이 두 가지 방법의 차이점에 대해 자세히 알아보려면 관련 정보를 찾아보세요.