首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在ajax调用中,在append tbody之后单击事件不起作用?

在ajax调用中,在append tbody之后单击事件不起作用的原因可能是因为事件绑定的时机不正确。当页面加载完成后,会绑定事件处理程序,但是在ajax调用中,append tbody是异步执行的,可能在事件绑定之前就已经执行完毕了。

解决这个问题的方法是使用事件委托。事件委托是将事件绑定到父元素上,然后通过事件冒泡机制来触发子元素的事件处理程序。这样无论子元素是在页面加载完成后还是动态添加的,都能够触发事件。

具体实现方法如下:

  1. 给父元素绑定事件处理程序,例如给table元素绑定click事件。
代码语言:txt
复制
$('table').on('click', 'tbody tr', function() {
  // 事件处理程序
});
  1. 在ajax调用中,通过append方法添加tbody元素。
代码语言:txt
复制
$.ajax({
  url: 'your_url',
  success: function(data) {
    $('table tbody').append(data);
  }
});

这样,无论是页面加载完成后还是在ajax调用中添加的tbody元素,都能够触发click事件。

关于ajax调用、事件委托和相关的前端开发知识,推荐使用腾讯云的云开发产品。云开发是一款面向开发者的一站式后端云服务,提供了丰富的云函数、数据库、存储、托管等功能,可以帮助开发者快速搭建和部署应用。

腾讯云云开发产品介绍链接地址:https://cloud.tencent.com/product/tcb

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

List.append() Python 不起作用,该怎么解决?

Python ,我们通常使用 List.append() 方法向列表末尾添加元素。然而,某些情况下,你可能会遇到 List.append() 方法不起作用的问题。...列表作为函数参数另一个导致 List.append() 方法不起作用的常见情况是将列表作为函数的参数传递。 Python ,函数参数传递是通过对象引用实现的。...函数内部,我们对 lst 调用append() 方法,将 element 添加到列表末尾。由于函数参数传递是通过引用实现的,所以对 lst 的修改会影响原始列表 my_list。3....'append'在这个例子,我们试图向元组 my_tuple 添加元素,但由于元组是不可变对象,不支持修改操作,因此调用 append() 方法会引发异常。...结论List.append() 方法 Python 通常是一个方便且常用的方法,用于向列表末尾添加元素。然而,当遇到某些情况时,它可能不起作用

2.6K20
  • SSM整合案例

    ,需要先请客表格,因为ajax是无刷更新,每一次调用都会重复追加 $("#emps_table tbody").empty(); //拿到员工数组...,需要先请客表格,因为ajax是无刷更新,每一次调用都会重复追加 $("#emps_table tbody").empty(); //拿到员工数组...使用ajax向标签追加内容后,标签体不会显示出现追加的内容,但是实际已经存在,那么下一次再次调用ajax时,又会重复上一次的追加行为,那么页面效果就是内容重复追加,解决办法就是每次调用ajax之前...,来保存一些我们需要用到的数据,例如给删除按钮增添一个自定义属性保存当前员工的id,方便一会通过在按钮点击事件获取到id值,从而通过ajax返回给服务器端,进行删除逻辑操作 使用ajax时,获取到服务器端发送来的数据后...,可以成功的回调函数,获取数据,然后通过append等方式,动态向需要的标签或位置添加内容

    4.1K21

    Django实现列表页商品数据返回教程

    采用的是cbv方式,cbv就是url中一个路径对应一个类 rom django.views.generic import View from goods.models import Goods...补充知识:django通过ajax请求接口返回多条数据,并动态生成表格,请求表单后将表格数据并入库 一、最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数...二、其中界面很简单,就一个文本输入框,输入关键字,一个查询按钮,点击的时候触发js事件,并通过ajax请求,还有一个暂时没有数据的表格,查询后动态生成的数据,操作只有一个移除功能,可以移除这条表格的数据...id="user_info" </tbody </table <button type="submit" 保存</button (2)、js事件代码如下: <script type="text...mobile_no"+ i +"' value='"+data[i]['mobile_no']+"' <td <a οnclick='remove("+i+")' 移除</a </td </tr ") } 点击保存之后

    82220

    springMVC实现文件图片的上传下载功能详解(源码已提供,小白必看)(一)

    请求数据: 上传的文件本身 普通数据:用户名,Id,密码等,建议上传功能不携带除上传资源以外的数据 数据格式: 传统的请求,请求数据是以键值对的格式来发送给后台服务器的,但是 上传请求,没有任何一个键可以描述上次的数据...ajax如何发送二进制流数据给服务器 ① 创建FormData的对象,将请求数据存储到该对象中发送 ② 将processData属性的值设置为false,告诉浏览器发送对象请求数据 ③ 将contentType.../****************资源上传功能实现**********************************/ $(function () { //给上传按钮增加单击事件...***********资源上传功能实现**********************************/ $(function () { //给上传按钮增加单击事件...(); formData.append("photo",file); 之后既然这个对象里面有二进制的信息了,就将这个对象利用ajax发送就可以了 //发起ajax请求完成资源上传

    2K30

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    one 绑定一次事件  绑定和解绑 文档装载完成以后,如果打算为元素绑定事件来处理完成某些操作,则可以使用 bind()方法来对匹配元素进行特定的事件绑定,bind()方法的调用格式如下: bind...可以用同样的方法解决 元素上的问题 阻止默认行为 网页的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 jquery,提供了preventDefault...position:"+event.pageX+","+event.pageY); return false;//阻止链接跳转 }); (7)event.which()方法 该方法的作用是鼠标单击事件获取到鼠标左右键...,键盘事件获取键盘的按键....A标签添加事件之后再追加a标签都具有相同的事件

    8.3K20

    JS利用函数修改全局变量

    现在博客系统的评论遇到一个问题,用户点击“最后一页”链接之后就自动调取最后一页的资料来显示。 我是将当前页用一个全局变量存储。...同时“最后一页”链接里单击方法调用一个函数自动去修改页数为最后一页,然后再调用载入评论的方法。 可是我发现点击“最后一页”第一次的时候系统没反应,再点击一次就抓去最后一页的资料了!....序号 + "发表日期" + n.日期 + "用户名:" + n.操作员 + "";                     str += "内容:" + n.事件...+ "";                 });                 $("#guest").append(str);                 $("#loading")...+ "";                 });                 $("#guest").append(str);                 $("#loading")

    5K40

    zepto 基础知识(6)

    2.success(data,status,xhr):请求成功之后调用,传入返回的数据,以及包含成功的代码代码片段     3.error(xhr,errorType,error...Ajax请求生命周期内 下面事件奖杯触发。     1.ajaxStart (global):如果没有其他Ajax请求当前活跃将会被触发。     ...7.ajaxStop (global):如果这是最后一个活跃着的Ajax请求,将会被触发。     默认情况下,Ajax事件document对象上触发。...然而,如果请求的 context 是一个DOM节点,该事件会在此节点上触发然后再DOM冒泡。唯一的例外是 ajaxStart & ajaxStop这两个全局事件。     ...105.$.ajaxSettings     一个包含Ajax请求的默认设置的对象。大部分的设置 $.ajax已经描述。

    1.6K100

    「Web编程API」- 03

    比如:我们给页面的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 当时的2大浏览器霸主谁也不服谁!...,会在最低点( 最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。...所以,事件处理函数声明1个形参用来接收事件对象。 事件对象的兼容性处理 事件对象本身的获取存在兼容问题: 标准浏览器是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。... IE6~8 ,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 获取查找。...什么是事件委托 把事情委托给别人,代为处理。 事件委托也称为事件代理, jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码父元素的事件执行。

    1.4K50

    从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    但是我们知道,Vue里面是不推荐使用jQuery的,那么如何使用Vue来发送Ajax请求呢? Vue可以使用第三方插件vue-resource 来实现Ajax请求的发送。...的事件,使用 this....但是,script标签src属性的链接却可以访问跨域的js脚本,于是利用这种特性,我们让服务器不再返回数据,而是返回一段调用某个函数的js代码,然后script中进行调用,就实现了跨域。...我们再改进一下,script的src传入的大多是后台文件,这里以php文件为例。 由于我们之前传入 js 文件只是想得到一个函数的调用而已,那么传入php文件怎么获取函数的调用呢? 我的数据,接口名称上方查看key值。 而我们访问的url即为:http://v.juhe.cn/movie/index?

    1.5K31

    【原生Ajax】全面了解xhr的概念与使用。

    请求所处的状态,每个Ajax请求必然处于一下状态的一个: 值 状态 描述 0 UNSENT XMLHttpRequest对象已被创建,但尚未调用open方法。...4 DONE Ajax请求完成,这意味着数据传输已经彻底完成或失败   使用xhr发起带参数的GET请求 使用xhr对象发起带参数的get请求时,只需调用xhr.open期间,为URL地址指定参数即可...URL地址不允许出现中文字符。 如果URL需要包含中文这样的字符,则必须对中文字符进行编码(转义)。...2.JavaScript解析XML比较麻烦。  ...封装自己的Ajax函数   要实现的效果 定义一个名为itheima的ajax函数,导入js文件之后,可以进行调用文件内的相关函数。

    2.4K20
    领券