JQuery Ajax 非同期操作用のノード インスタンスの動的追加の詳細な説明

非同期操作によりノードが動的に追加され、グローバル バインディング イベントが発生したり、コード内の追加されたノードへの要素の取得が無効になったりします。何が問題ですか?この記事では、JQuery Ajax の非同期操作のノード インスタンスの動的追加について詳しく説明しますので、興味のある方は参考にしていただければ幸いです。

rreee

それで、何が問題なのでしょうか？

実際、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);
      },
      error:function (err) {
　　　　　　　　　alert(err);
　　　　　　　}
    });
  }
}
//这是一段很明显的通过JQuery-ajax前后台交互并动态添加的代码；
//但是，如果你在该方法(showData())外面来给上述动态添加的a标签添加事件或者获取值的时候可能会出现无效的情况：
　　$(&#39;.remove&#39;).click(function(){
　　　　alert(&#39;这是删除按钮！&#39;);
　　});
　　//页面中则不会弹出（这是删除按钮！）的弹框;

イベントをバインドすることで、内部的にイベントのコードを ajax に変更します。動的追加が完了した後にボタンに追加すると、必要な効果を実現できます。これが ajax の非同期メカニズムです

関連する推奨事項:

jQuery の動的ノード追加と Traverse ノード関数の詳細な説明

PHP での XML アプリケーション開発の基本 ノードの追加 ノードの削除 ノードのクエリ クエリ セクション_PHP チュートリアル

Mysql クラスターのノードの追加水平拡張

以上がJQuery Ajax 非同期操作用のノード インスタンスの動的追加の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。