> 웹 프론트엔드 > JS 튜토리얼 > jquery는 위임 취소를 사용하여 위임을 사용하여 동적으로 생성된 요소에 바인딩된 이벤트를 제거하는 방법은 무엇입니까?

jquery는 위임 취소를 사용하여 위임을 사용하여 동적으로 생성된 요소에 바인딩된 이벤트를 제거하는 방법은 무엇입니까?

黄舟
풀어 주다: 2017-06-26 10:58:27
원래의
1401명이 탐색했습니다.

실제로 일회성 이벤트를 추가해야하는데, 이는 one 메소드를 사용하여 해결할 수 있습니다.

다음과 같은 기능을 달성하세요. 이름이 abc로 시작하는 a 요소는 처음 클릭했을 때 해당 내용을 출력합니다

$("a[name^='abc']").one(function(
    console.log($(this).html());
));
로그인 후 복사

그러나 one 메소드는 동적으로 생성된 요소를 지원하지 않습니다. Delegate

$(document).delegate("a[name^='abc']","click",function(){    console.log($(this).html());    //这里我需要点击一次后 再删除此click绑定

    $(document).undelegate($(this),"click"); //这句不管用
    $(this).undelegate("click"); //也不管用

    //手册上说undelegate第一个参数需要指定一个单独的selector,
    //a[name^='abc']取到的是一个元素集,用它后会删除掉所有绑定。
    //没有被点过的也删除了。求解,我只需要被点一次后的元素删除click事件})
로그인 후 복사

를 사용하여 작성자가 의미하는 바는 다음과 같습니다. 페이지에 여러 개의 a[name=^'abc'] 요소가 있습니다. 클릭 이벤트는 위임을 통해 문서에 바인딩됩니다.

해결 방법: 1. $object.data()를 사용하여 데이터를 저장하고

$(document).on('click', 'a[name^="abc"]', function(e) {   //委托,实现绑定click事件
            if (!$(this).data('clicked')) {   //判断是否已经被点击,
                                              // 第一次点击因为 $(this).data('click')为 undefined 
                linkClickHandler.call(this);  //调用处理函数
                $(this).data('clicked', true); //设置  "已点击"
            }            return false;   //返回false,阻止默认行为,因为 <a>自动跳转
        });function linkClickHandler() { // 事件处理函数
            // 函数中的this指向触发的元素 , 为 DomElement类型
            //TODO 
            console.log($(this).text());
        }
로그인 후 복사

delegate 대신 on을 사용하세요

<div id="target">test</div><script type="text/javascript">$(&#39;#target&#39;).on(&#39;click&#39;, function() {    var self = $(this);
    alert(self.text());
    self.off(&#39;click&#39;);
});
로그인 후 복사

on이 현재 및 미래 요소를 관리합니다. , 괜찮습니다 범위를 지정하고 선택기를 지정하고 이벤트 수를 줄이고 순회 속도를 높이십시오.

bind, live, Delegate는 1.9 이후 더 이상 권장되지 않으며, 이제 하나만 On으로 모두 대체할 수 있습니다~

//举个例子
$(document).ready(function(){
  $("body").delegate("p","click",function(){
    //do some
  });
  $("button").click(function(){
    $("body").undelegate();
  });
});
로그인 후 복사

위 내용은 jquery는 위임 취소를 사용하여 위임을 사용하여 동적으로 생성된 요소에 바인딩된 이벤트를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿