JQuery Ajax 비동기 작업을 위한 노드 인스턴스를 동적으로 추가하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-01-10 13:45:30

원래의

1463명이 탐색했습니다.

비동기 작업은 노드를 동적으로 추가하여 전역 바인딩 이벤트를 발생시키거나 코드에서 추가된 노드에 요소를 가져오는 것이 유효하지 않게 됩니다. 이 글은 주로 JQuery Ajax 비동기 작업의 노드 인스턴스를 동적으로 추가하는 방법에 대한 자세한 설명을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

$(function () {
  var IP = &#39;...&#39;; // 页面中的默认编号起始值 和  公用IP前缀
  showData();
  function showData() {
    if ($(&#39;.content&#39;)) $(&#39;.content&#39;).remove();
    $.ajax({
      url:IP + &#39;/get&#39;,
      type:&#39;get&#39;,
      success:function (data) {
        var newInfo = &#39;&#39;;
        if(!data) return alert(&#39;对不起，没有数据可供操作！&#39;);
        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 = &#39;...&#39;; // 页面中的默认编号起始值 和  公用IP前缀
  showData();
  function showData() {
    if ($(&#39;.content&#39;)) $(&#39;.content&#39;).remove();
    $.ajax({
      url:IP + &#39;/get&#39;,
      type:&#39;get&#39;,
      success:function (data) {
        var newInfo = &#39;&#39;;
        if(!data) return alert(&#39;对不起，没有数据可供操作！&#39;);
        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 중국어 웹사이트의 기타 관련 기사를 참조하세요!