Explication détaillée de l'ajout dynamique d'instances de nœuds pour le fonctionnement asynchrone JQuery Ajax

Les opérations asynchrones ajoutent des nœuds de manière dynamique, ce qui rend les événements de liaison globale ou l'obtention d'éléments invalides dans les nœuds ajoutés dans le code. Quel est le problème ? Cet article vous présente principalement l'explication détaillée de l'ajout dynamique d'instances de nœuds du fonctionnement asynchrone JQuery Ajax. Les amis intéressés peuvent s'y référer. J'espère que cela pourra vous aider.

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

Alors, quel est le problème ?

En fait, le processus par lequel ajax obtient les données de l'arrière-plan et les affiche sur notre page est asynchrone, c'est-à-dire que lorsque nous utilisons ajax pour obtenir la valeur de l'arrière-plan, le code après ajax est exécuté. en continu. Au lieu d'attendre que vous ayez terminé l'acquisition ajax et la création de nœuds avant de continuer l'exécution, voici le mécanisme des requêtes asynchrones :

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

.

Changez le code de liaison des événements à l'intérieur d'ajax, de sorte qu'une fois l'ajout dynamique terminé, puis liez les événements aux boutons, nous puissions obtenir l'effet dont nous avons besoin. C'est le mécanisme asynchrone d'ajax

. Recommandations associées :

Explication détaillée de jQuery pour implémenter la fonction d'ajout dynamique de nœuds et de nœuds traversants

Développement d'applications XML en PHP Basics Add Node Supprimer la requête de nœud Section de requête de nœud_Tutoriel PHP

Le cluster MySQL ajoute une expansion horizontale de nœud

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!