`
rikey111
  • 浏览: 1074 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JS中由ajax异步生成的页面元素绑定事件失效问题

阅读更多
最近在学习做前端的时候遇到一个问题,在使用ajax异步生成界面元素的时候,想给元素绑定一个点击事件,却发现怎么也不生效。
$.ajax({
url:,
type:,
async:true,
timeout:5000,
success:function(data){
  // 生成界面元素的代码
  // <a class="onclickitem" href="#">content</a>
}
});

$(".onclickitem").click(function(e){
    alert("item clicked");
    return false;   // 只要这里return false,超链接就不会跳转了
});

这样绑定是不会生效的,咨询了一下做前端的同学,原因是ajax设置了异步执行,下面的绑定代码应该是在ajax生成界面元素之前就执行了,这样是绑定不上的。解决方法有两个:
1. 把ajax的async属性改为false。这样就能成功地绑定上了
2. 在绑定的过程中,为每个元素单独绑定事件。这样比较靠谱
同事提供了另一种方式,在下面用live来绑定,但是测试过,不生效。
分享到:
评论

相关推荐

    jquery .ajax 局部刷新之后 js无法调用问题解决

    综上所述,解决`.ajax`局部刷新后js无法调用的问题,关键在于理解DOM更新、作用域、事件绑定和页面生命周期等概念,并根据实际情况采取相应的调整策略。通过以上方法,我们可以确保JavaScript代码在局部刷新后依然...

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

    事件委托允许我们在页面上已存在的父级元素上绑定事件监听器,而不是直接在动态生成的元素上绑定。这样,即使是在事件绑定后新添加的元素,只要它们符合委托选择器,也能触发该事件。在本例中,我们可以将点击事件...

    解决给dom元素绑定click等事件无效问题的方法

    其次,如果使用js插件异步或动态加载DOM元素,由于DOM元素尚未加载到页面中,直接绑定click事件会失败。这时,可以使用延迟执行或者事件委托来解决。方法一是设置一个延时函数,等待DOM加载后再绑定事件,例如: ```...

    ajax更新数据后,jquery、jq失效问题

    当使用jQuery库来操作DOM和绑定事件时,如果页面的部分内容是通过AJAX动态加载的,就可能出现事件绑定失效的问题。本知识点将围绕“AJAX更新数据后,jQuery事件失效问题”进行深入探讨。 首先,我们要了解jQuery的...

    iframe实现异步无刷新提交

    在网页开发中,异步无刷新提交是一种提升用户体验的重要技术,它使得用户在提交表单或执行某些操作时,无需等待整个页面刷新,而是仅更新部分网页内容。本主题聚焦于利用`iframe`来实现这一功能,这在不支持现代Ajax...

    浅谈jQuery添加的HTML,JS失效的问题

    2. jQuery事件绑定失效:当通过jQuery动态添加了HTML元素后,如果之前的事件绑定是通过传统的.bind()或.on()方法进行的,那么这些事件可能不会自动应用到新添加的元素上。因为.bind()或.on()只能影响已经存在于DOM中...

    浅谈jQuery绑定事件会叠加的解决方法和心得总结

    在JavaScript和jQuery的世界中,事件绑定是常见的交互方式,它允许我们对用户的操作做出响应。然而,如果在处理动态内容时不小心,可能会遇到事件绑定叠加的问题,这正是本文要探讨的核心话题。 首先,我们需要理解...

    jQuery详细教程

    下面是 jQuery 中事件方法的一些例子: Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $...

    js点击事件链接的问题解决

    总结来说,文档通过具体的代码示例,介绍了如何在JavaScript中处理超链接的点击事件,使得超链接在触发弹窗等操作后,仍然能够控制其默认行为(例如,防止页面跳转),这对于提升用户交互体验和前端行为控制是非常有...

    有问题的地图显示代码

    这个问题可能与AJAX(异步JavaScript和XML)以及C#后端的交互有关。下面我们将详细讨论这些知识点。 首先,让我们深入理解Google Maps API。这是一个强大的工具,允许开发者将动态、交互式的Google地图集成到自己的...

    高效Web开发的10个jQuery代码片段_.docx

    在Web开发中,jQuery是一个非常强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。以下是从"高效Web开发的10个jQuery代码片段"中提炼出的关键知识点: 1. **检测Internet Explorer版本**: ...

    jQuery飞机航班查询

    2. JavaScript逻辑:绑定查询按钮的点击事件,获取表单数据,构造AJAX请求,处理返回的航班数据,将其展示在页面上。 3. JSON数据解析:服务器通常会返回JSON格式的航班数据,使用jQuery的$.parseJSON()或JSON....

    在UpdatePanel内jquery easyui效果失效的解决方法

    当在***中使用UpdatePanel控件时,虽然能够实现部分页面内容的异步更新而无需刷新整个页面,但这却可能导致引入的jQuery EasyUI库的功能失效。jQuery EasyUI是一个基于jQuery的前端UI框架,它提供了一系列的用户界面...

    ecshop解决与jQuery冲突文件

    `transport.js`是ECSHOP用来处理AJAX通信的核心组件,它负责与服务器进行异步数据交换,更新页面内容而无需刷新整个页面。然而,由于ECSHOP早期版本的设计,`transport.js`可能使用了一些与jQuery库相冲突的函数或...

    解决使用layui对select append元素无效或者未及时更新的问题

    在Web开发过程中,我们经常需要动态地向select元素添加option元素,尤其是在使用前后端分离的应用中,数据往往需要通过异步请求(AJAX)从服务器端获取。然而,在使用layui框架时,有时会遇到动态添加的select元素不...

    通过输入框实时查询列表值

    首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在本场景中,jQuery用于监听用户在输入框(input field)中的键击(keyup)事件。keyup事件会在用户释放键盘上的按键时触发,...

    ASP.NET复习思考题

    - 页面跳转可以通过location.href、超链接或Ajax异步请求实现。 7. **JavaScript函数** - function关键字用于声明函数,它封装了可重用的代码,也可以用于声明类。 这只是ASP.NET的一部分内容,实际开发中还会...

Global site tag (gtag.js) - Google Analytics