비동기 작업은 노드를 동적으로 추가하여 전역 바인딩 이벤트를 발생시키거나 코드에서 추가된 노드에 요소를 가져오는 것이 유효하지 않게 됩니다. 이 글은 주로 JQuery Ajax 비동기 작업의 노드 인스턴스를 동적으로 추가하는 방법에 대한 자세한 설명을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
$(function () { var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀 showData(); function showData() { if ($('.content')) $('.content').remove(); $.ajax({ url:IP + '/get', type:'get', success:function (data) { var newInfo = ''; if(!data) return alert('对不起,没有数据可供操作!'); newInfo +='<p class="btnBox">' + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">删除</a>' + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>' + '</p>'; });$('body').append(newInfo); }, error:function (err) { alert(err); } }); } } //这是一段很明显的通过JQuery-ajax前后台交互并动态添加的代码; //但是,如果你在该方法(showData())外面来给上述动态添加的a标签添加事件或者获取值的时候可能会出现无效的情况: $('.remove').click(function(){ alert('这是删除按钮!'); }); //页面中则不会弹出(这是删除按钮!)的弹框;
그럼 뭐가 문제인가요?
사실 ajax가 백그라운드에서 데이터를 가져와 페이지에 표시하는 과정은 비동기식입니다. 즉, ajax를 사용하여 백그라운드에서 값을 가져올 때 ajax 이후의 코드가 계속 실행됩니다. 실행을 계속하기 전에 Ajax 획득 및 노드 생성이 완료되기를 기다리는 것이 비동기식 요청 메커니즘입니다. 이 문제를 해결하는 방법:
$(function () { var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀 showData(); function showData() { if ($('.content')) $('.content').remove(); $.ajax({ url:IP + '/get', type:'get', success:function (data) { var newInfo = ''; if(!data) return alert('对不起,没有数据可供操作!'); newInfo +='<p class="btnBox">' + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">删除</a>' + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>' + '</p>'; });$('body').append(newInfo); // 当动态添加节点完成之后再给其中的按钮绑定事件 $('.remove').click(function(){ alert('这是删除按钮!'); }); }, error:function (err) { alert(err); } }); } }
이벤트 바인딩 코드를 ajax로 변경합니다. 내부적으로 이벤트 바인딩을 통해 동적 추가가 완료된 후 버튼에 필요한 효과를 얻을 수 있습니다. 이것이 ajax의 비동기 메커니즘입니다.
PHP에서 XML 애플리케이션 개발의 기본 노드 추가 노드 삭제 노드 쿼리 섹션_PHP 튜토리얼위 내용은 JQuery Ajax 비동기 작업을 위한 노드 인스턴스를 동적으로 추가하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!