JQuery Ajax 비동기 작업을 위한 노드 인스턴스를 동적으로 추가하는 방법에 대한 자세한 설명

비동기 작업은 노드를 동적으로 추가하여 전역 바인딩 이벤트를 발생시키거나 코드에서 추가된 노드에 요소를 가져오는 것이 유효하지 않게 됩니다. 이 글은 주로 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 +=&#39;<p class="btnBox">&#39; +
             　　&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">删除</a>&#39; +
             　　&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>&#39; +
             &#39;</p>&#39;;
        });$(&#39;body&#39;).append(newInfo);
      },
      error:function (err) {
　　　　　　　　　alert(err);
　　　　　　　}
    });
  }
}
//这是一段很明显的通过JQuery-ajax前后台交互并动态添加的代码；
//但是，如果你在该方法(showData())外面来给上述动态添加的a标签添加事件或者获取值的时候可能会出现无效的情况：
　　$(&#39;.remove&#39;).click(function(){
　　　　alert(&#39;这是删除按钮！&#39;);
　　});
　　//页面中则不会弹出（这是删除按钮！）的弹框;

그럼 뭐가 문제인가요?

사실 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 +=&#39;<p class="btnBox">&#39; +
             　　&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">删除</a>&#39; +
             　　&#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>&#39; +
             &#39;</p>&#39;;
        });$(&#39;body&#39;).append(newInfo);
        // 当动态添加节点完成之后再给其中的按钮绑定事件
        $(&#39;.remove&#39;).click(function(){
　　　　    　　　　alert(&#39;这是删除按钮！&#39;);
　　     　　　});
      },
      error:function (err) {
　　　　　　　　　　　alert(err);
　　　　　　　　}
    });
  }
}

이벤트 바인딩 코드를 ajax로 변경합니다. 내부적으로 이벤트 바인딩을 통해 동적 추가가 완료된 후 버튼에 필요한 효과를 얻을 수 있습니다. 이것이 ajax의 비동기 메커니즘입니다.

PHP에서 XML 애플리케이션 개발의 기본 노드 추가 노드 삭제 노드 쿼리 섹션_PHP 튜토리얼

Mysql 클러스터 노드 수평 확장 추가

위 내용은 JQuery Ajax 비동기 작업을 위한 노드 인스턴스를 동적으로 추가하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!