Ajax异步获取html数据中包含js方法无效的解决方法

页面上使用js写了一个获取后台数据的方法

function data() {
    var tab = $("#dic")
    $.ajax({
      url: '../demo.ashx?method=GetList',
      data: {},
      dataType: 'json',
      type: 'post',
      async: true,
      success: function (data) {
        //console.log(data);
        var parentStr = '';
        $.each(data, function (i, item) {
          //console.log(item.text);

          parentStr += "<div class='pull-right'> <a class='morechange' href='javascript:;' style='visibility: visible;'>更多+</a></div>"
});
        tab.html(parentStr);
      }
    })
  }

其中的

<a class='morechange' href='javascript:;' style='visibility: visible;'>更多+</a>  绑定一个点击时间

$('.morechange').click(function(){
  alert("弹出")
});

发现点击无效无效

原来是 ajax载入新dom之前js 就加载完了,事件当然没有绑定到新载入的dom上

解决方法:

使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上

$("#dic").delegate('.morechange', 'click', function () { alert("弹出"); });

问题解决。

当然也可以不使用异步将async改为false也是可以的

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

时间: 2017-02-18

jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码

(jsp需要引入 :jquery-1.9.0.js.jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异.代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献:http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 复制代码 代码如下: <%@page impor

WordPress中利用AJAX异步获取评论用户头像的方法

在评论者输入邮箱后,异步获得评论者的头像并显示出来,个人感觉这个功能虽不能给用户体验带来多大的提升,也不算是一个实用的功能,但至少很炫,看到有的网站有添加这个功能,我也不甘寂寞所以也写了个脚本,没有时间做封装,所以直接上原理和代码. 异步动态调用头像原理 获得用户输入 过滤用户输入 传递变量到后台 后台处理数据,并返回头像的HTML代码 获得后台返回数据,将HTML代码加载到当前页面 貌似很多步骤,其实很简单,我们只要将自己的主题稍作修改就可以到达效果. 简单功能截图: 实现 功能代码:Java

ajax 异步获取数据实现代码 (js创建ajax对象)

复制代码 代码如下: <script type="text/javascript"><!-- var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request =

jquery的ajax异步请求接收返回json数据实例

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

jQuery Ajax异步处理Json数据详解

先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){  $.getJSON("demo_ajax_json.js",function(result){    $.each(result, function(i, field){      $("div").append(field + " ");    });  });

Ajax请求中的异步与同步,需要注意的地方说明

之前做项目时候,用到一个表格控件,它的数据是异步加载的,我在这个表格绑定数据的函数下面友做了一些业务处理,运行页面的时候,用浏览器在我写业务处理那地方打上断点跟踪,它确实执行了,可以最后显示的时候,它的处理被覆盖了,我很纳闷,当时也知道是这个表格绑定函数那出问题了,可是时间紧,它的函数是封装的,没有去具体跟踪,就直接让我的那部分业务处理延迟200ms执行,这样就好了,这是个笨法,不过也是个有效的办法,呵呵. 后来看了下文档,查了些资料,其实原理应该是这样的: 默认设置下,所有请求均为异步请求.如

ajax异步刷新实现更新数据库

上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中. 当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库. 首先,我们需要声明XMLHttpRequest对象 复制代码 代码如下: //声明XMLHttpRequest对象 var xmlHttp; function createXMLHTTP() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 } else if

jquery ajax属性async(同步异步)示例

例1.jquery+ajax/" target="_blank">jquery ajax同步方式 复制代码 代码如下: $.ajax({url : 'test.php',type : 'post',async: false,//使用同步的方式,true为异步方式data : {'act':'addvideo', 'videoname':videoname},//这里使用json对象success : function(data){//code here...},fail

详谈 Jquery Ajax异步处理Json数据.

所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml

Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1.首先在jsp页面的JavaScript,这段代码是通用的,所以把他放在函数外面,可以供其他的函数共同使用 var xhr=false; //创建XMLHttpRequst对象 if(window.XMLHttpRequest) { xhr=new XMLHttpRequest(); } else

纯javascript的ajax实现php异步提交表单的简单实例

很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam

Android通过原生方式获取经纬度与城市信息的方法

一.概述 在项目中需要获取用户所在位置的经纬度和城市上送给风控系统.一般来说,定位有两种方式: 用第三方SDK定位,如百度地图.高德地图.谷歌地图: 用Android原生SDK中的api定位: 本文讲述定位的第二种方式--用Android原生的SDK中的api定位,如果项目定位要求较高还是建议使用第三方地图库. 二.Android原生SDK中的api定位 Android原生方式获取经纬度两种定位方式:GPS定位和Wifi定位 GPS定位相比Wifi定位更精准且可在无网络情况下使用,但在室内基本暴

jquery+json实现数据二级联动的方法

本文实例讲述了jquery+json实现数据二级联动的方法.分享给大家供大家参考,具体如下: function GetCityInfo1() { $("#ddlCITY1").empty(); //$("#ddlCOUNTY").empty(); var strId = $("#ddlPROVINCE1").attr("value"); $('#HiddenPro').val(strId); $.get("../as

.NET获取枚举DescriptionAttribute描述信息性能改进的多种方法

一. DescriptionAttribute的普通使用方式 1.1 使用示例 DescriptionAttribute特性可以用到很多地方,比较常见的就是枚举,通过获取枚举上定义的描述信息在UI上显示,一个简单的枚举定义: public enum EnumGender { None, [System.ComponentModel.Description("男")] Male, [System.ComponentModel.Description("女")] Fem

javascript读取Xml文件做一个二级联动菜单示例

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu2level.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &

jQuery+JSON实现AJAX二级联动实例分析

本文实例讲述了jQuery+JSON实现AJAX二级联动的方法.分享给大家供大家参考,具体如下: 后台Handler.ashx <%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; public class Handler : IHttpHandler { Common coObj = new Common();

使用ajax异步提交表单的几种方法总结

这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor

jquery ajax异步提交表单数据的方法

使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据包括文件流的话,就需要使用 FormData对象: 不带文件的表单数据使用:var data = $(form).serialize(); 带文件的表单数据使用:   var  data = new FormData($(form)[0]); 一.不带文件的ajax提交数据: html:form表单

extJS中常用的4种Ajax异步提交方式

/** 复制代码 代码如下: * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return */ function saveUser_ajaxSubmit1() { Ext.Ajax.request( { url : 'user_save.action', method : 'post', params : { userName : document.getElementById('userName').val