Ausführliche Erläuterung des dynamischen Hinzufügens von Knoteninstanzen für den asynchronen JQuery-Ajax-Vorgang

Asynchrone Vorgänge fügen Knoten dynamisch hinzu, was dazu führt, dass globale Bindungsereignisse oder das Abrufen von Elementen zu den hinzugefügten Knoten im Code ungültig sind. Dieser Artikel führt Sie hauptsächlich in die detaillierte Erklärung des dynamischen Hinzufügens von Knoteninstanzen des asynchronen JQuery-Ajax-Vorgangs ein. Ich hoffe, er kann Ihnen helfen.

$(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;);
　　});
　　//页面中则不会弹出（这是删除按钮！）的弹框;

Also, was ist das Problem?

Tatsächlich ist der Prozess, bei dem Ajax Daten aus dem Hintergrund abruft und auf unserer Seite anzeigt, asynchron. Das heißt, wenn wir Ajax verwenden, um den Wert aus dem Hintergrund abzurufen, wird der Code nach Ajax ausgeführt Anstatt darauf zu warten, dass Sie die Ajax-Erfassung und -Erstellung abgeschlossen haben, bevor Sie mit der Ausführung fortfahren, ist dies der Mechanismus asynchroner Anforderungen:

$(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);
　　　　　　　　}
    });
  }
}

Ändern Sie den Code zum Binden von Ereignissen in Ajax, sodass wir nach Abschluss der dynamischen Hinzufügung und anschließenden Bindung von Ereignissen an die Schaltflächen den gewünschten Effekt erzielen können. Dies ist der asynchrone Mechanismus von Ajax

Verwandte Empfehlungen:

Detaillierte Erläuterung von jQuery zum dynamischen Hinzufügen von Knoten und Durchlaufen von Knoten

XML-Anwendungen in PHP-Grundlagen entwickeln Knoten hinzufügen Knoten löschen Knoten abfragen Abfrageabschnitt_PHP-Tutorial

Horizontale Erweiterung des MySQL-Clusters zum Hinzufügen von Knoten

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des dynamischen Hinzufügens von Knoteninstanzen für den asynchronen JQuery-Ajax-Vorgang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!