jQuery의 대리자 메서드가 Ajax 요청 바인딩 이벤트를 손실하지 않고 구현하는 방법에 대한 자세한 설명

클릭 이벤트를 요소에 바인딩한 후 문제가 발생했습니다. 일부 Ajax 요청을 실행하고 이 페이지를 다시 호출하면 내부의 클릭 이벤트가 유효하지 않게 되었습니다.

예: 내 페이징은 ajax 요청이지만 I 다음 페이지를 클릭하면 생성된 요소에 더 이상 클릭 이벤트가 없습니다.

내 프로젝트에서 작업할 때 발생하는 문제:

목적: 일괄 삭제 checkbox, jquery 바인딩 삭제를 클릭하면 활용이 시작됩니다. 모든 체크박스의 값을 얻기 위한 버튼의 onclick 이벤트,

　　1. 처음으로 조건에 따라 페이지를 호출하기 위해 smarty를 직접 주입할 때는 문제가 없습니다(Ajax 구현. ), 페이지 컬럼을 다시 호출 녹화시 클릭 이벤트가 실패합니다

이유: ajax 콘텐츠 로딩은 $(document).ready() 이후 작업입니다. , 발견된 요소 집합 또한 ajax에서 로드한 콘텐츠를 포함하지 않으므로 원본에는 문제가 없으며 나중에 로드된 콘텐츠는 바인딩되지 않습니다.

최종 해결 방법:

1. () method

2. 사용 네이티브 js는 제출 확인 기능에 체크박스의 값을 씁니다.

<form method="post" action="channel_code_manage.php?act=removeall" name="listForm" id="deleted" class="fn-mt20" onsubmit="
return
 checkbox();">

값이 있으면 확인이 통과되고 값이 전달됩니다. 숨겨진 필드 값

에 할당됩니다. 값이 없으면

function checkbox() {
       var compatibility = "",input = document.getElementsByTagName("input"),value;
       for (var i = 0; i < input.length; i++) {
           if (input[i].type == "checkbox") {
               if (input[i].checked) {
                   value = input[i].value;
                   if(value!=&#39;on&#39;){   　　　　　　　　　　　　　　　　给全选按钮value设置为on  排除此选项
                       compatibility += value + ","; 　　　　　　　　　　拼接字符串
                   }}

}
       }
       compatibility = compatibility.substring(0,compatibility.lastIndexOf(","));  //删除最后的，

 

if(!compatibility){　　//如果字符串为空 ，返回false
           alert(&#39;请选择要删除的记录&#39;);
           return false;
       }else{
           document.getElementById(&#39;getvalues&#39;).value=compatibility;   //如果字符串不为空 把值赋值给隐藏于提交
           confirm(&#39;确定批量删除？&#39;);
       }

 

}

해결 방법:

1. jquery의 대리자를 사용하세요. (sel,[type],[data],fn) method
live() 메서드가 더 이상 사용되지 않습니다

$(document).delegate('a', 'click', function() { blah() }) 바인딩 이벤트 해결 Ajax 요청이 지정된 요소(선택한 요소의

하위 요소

에 속함)를 무효화하지 않습니다. 하나 이상의 이벤트 핸들러루틴을 추가하고 이러한 이벤트가 발생할 때 실행할 함수를 지정합니다. Delegate() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트로 생성된 새 요소)에 적용됩니다.

매개변수:

selector:

이벤트를 트리거하는 filter 요소에 대한 선택기 문자열입니다.

유형:

요소에 연결된 하나 이상의 이벤트입니다. 여러 이벤트 값을 공백으로 구분합니다. 유효한 이벤트여야 합니다.

data:

함수에 전달된 추가 데이터

fn:

이벤트 발생 시 실행되는 함수

$(function(){
$('#deleted').delegate("button",'click',function(){  被选元素的子元素---->deleted为form 表单 button为表单中的按钮              
checked = [];            
$('input:checkbox:checked').each(function() {                
checked.push($(this).val());            
});            
$('#getvalues').val(checked);  //给隐藏域设置属性        
})
})

문제를 완벽하게 해결해 드려요, 하하!

확장:

이전 버전의 jQuery에서는 페이지에 ajax가 로드한 페이지 콘텐츠의 특정 조각에 대한 이벤트에 응답해야 할 때 라이브 함수를 사용하여 해당 이벤트에 응답할 수 있습니다. 예: $('a ').live('click', function() { blah() });

최신 버전의 jQuery에서는 라이브 함수가 더 이상 사용되지 않습니다.

의 기능을 구현하는 방법. 새 버전의 라이브 기능은 무엇입니까? 즉, 페이지 조각이 ajax를 통해 로드되면 이 페이지 조각의 콘텐츠가 관련 이벤트에 어떻게 반응합니까?

여러 가지 방법이 있지만 이 기사에서는 두 가지 간단한 방법만 제공합니다.

첫 번째는 라이브 기능을 사용할 수 있도록 jquery- migration을 직접 가져오되 성능을 최적화하지 않는 것입니다.
또 하나는 델리게이트 기능을 이용하여 라이브 기능을 구현하는 것

• $(document).delegate('a', 'click', function() { blah() });

위 내용은 jQuery의 대리자 메서드가 Ajax 요청 바인딩 이벤트를 손실하지 않고 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!