zoukankan      html  css  js  c++  java
  • JQueryAjax 异步操作 动态添加节点 (新人试水,求支持)

    异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,上代码:

    $(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 +='<div class="btnBox">' +
                                '<a href="javascript:;" class="remove">删除</a>' +
                                '<a href="javascript:;" class="change">修改</a>' +
                              '</div>';
                    });$('body').append(newInfo);
                },
                error:function (err) {
             alert(err);
           }
            });
        }
    }
    //这是一段很明显的通过JQuery-ajax前后台交互并动态添加的代码;
    //但是,如果你在该方法(showData())外面来给上述动态添加的a标签添加事件或者获取值的时候可能会出现无效的情况:
      $('.remove').click(function(){
        alert('这是删除按钮!');
      });
      //页面中则不会弹出(这是删除按钮!)的弹框;

    那么,问题出在哪里呢?

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

    将绑定事件的代码改到ajax内部,这样让动态添加完成之后再给其中的按钮绑定事件,就可以达到我们所需要的效果了,这便是ajax的异步机制

    在以后的项目开发中,希望朋友们能够正确理解ajax的机制,希望本篇随笔能够对你有所帮助!

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明。
  • 相关阅读:
    2019.6.20刷题统计
    36 线程 队列 守护线程 互斥锁 死锁 可重入锁 信号量
    35 守护进程 互斥锁 IPC 共享内存 的方式 生产者消费者模型
    34 进程 pid ppid 并发与并行,阻塞与非阻塞 join函数 process对象 孤儿进程与僵尸进程
    33 udp 域名 进程
    32 粘包 文件传输
    31 socket客户端. 服务器 异常 语法
    30 网络编程
    29 元类 异常
    26 封装 反射 常用内置函数
  • 原文地址:https://www.cnblogs.com/Lxb98117/p/JQuery_Ajax.html
Copyright © 2011-2022 走看看