`

同一个页面多个div,ajax调用

阅读更多

        最近在做项目的时候发现两个问题,第一个问题是在主页面有多个div,在div里面有input元素的onclick事件,在第一次打开div的时候通过onclick调用ajax可以被执行,当关掉打开的div重新再打开的时候onclick事件不生效。第二个问题是两个div调用ajax时会相互影响,当打开第一个div并关闭的时候,第二个div的input元素的onclick事件不被执行了。

        针对第一个问题,将input的onclick时间使用jquery的live()方法进行绑定,这时要对input元素的属性进行声明,如<input type="button" id="updateData">,在绑定事件时可以写成

        $("input#updateData").live("click",function(){

             需要执行的代码

        });

这样修改之后就可以执行所需执行的onclick事件了,但是这样存在一个问题,当多次调用时需要执行的代码就会被重复执行,这时因为每执行一次live()就会新生成一个委派函数,为了避免这个问题只需要在live()前使用die()即可,即将上述代码改为:

        $("input#updateData").die().live("click",function(){

             需要执行的代码

        });

这样修改之后在重复执行之前总是会销毁原来的委派,即只保留一个委派,就不会出现重复的问题了。

       针对第二个问题,这里由于我两个div里面有相同的字段,为了偷懒直接将其中一个div的重复内容复制到了第二个div中,导致元素的id相同,在调用ajax根据id进行赋值时就无法确定赋值给哪个div,因此就出现上述我所描述的问题,在这里需要注意,当同一个页面嵌套多个div的时候,除非是不需要对div里面的元素进行操作,如果涉及到操作的话,一定要保证你所使用的id或者name完全不同,在这里指出来也希望小伙伴你们汲取教训。

1
1
分享到:
评论

相关推荐

    选项卡,页面使用ajax调用

    在网页设计中,选项卡是一种常见的用户界面元素,它允许用户在多个相关的视图或内容之间切换,而无需离开当前页面。"选项卡,页面使用ajax调用"这个主题涉及了如何利用AJAX(Asynchronous JavaScript and XML)技术...

    AJAX可以拖动的DIV块.rar

    1. **AJAX应用**:除了拖动效果,AJAX还广泛用于表单提交、数据加载、动态更新内容等多个场景。 2. **DIV布局**:DIV是网页布局的基础,通过CSS样式可以控制其大小、位置和显示方式,实现复杂的网页设计。 3. **响应...

    点击页面链接后根据参数调用后台方法,获取数据并显示数据到弹出div上

    在网页开发中,实现“点击页面链接后根据参数调用后台方法,获取数据并显示数据到弹出div上”的功能,通常涉及到前端JavaScript技术、AJAX异步请求以及后端接口设计。以下将详细讲解这一过程中的关键知识点。 1. **...

    AJAX动态加载无限级树和弹出div层

    实现无限级树的关键在于递归调用,每次加载一部分节点,当用户展开某个节点时,再通过AJAX请求获取其子节点并动态渲染到页面上。这既节省了初始加载时的带宽,又确保了良好的性能表现。 接下来,我们讨论"div层"。...

    Ajax无刷新异步调用后台方法获取系统时间显示

    1. **XMLHttpRequest对象**:这是Ajax的基础,它提供了一个在后台与服务器通信的接口,可以在不刷新页面的情况下发送和接收数据。 2. **JavaScript**:用于创建和控制XMLHttpRequest对象,构建请求并处理服务器返回...

    jquery遮罩,ajax时调用

    "jquery遮罩,ajax时调用"这一主题,就是关于如何在Ajax请求执行期间显示一个遮罩层,以阻止用户与页面其他部分的互动。 首先,我们来看一下遮罩层的基本概念。遮罩层是一种在页面上覆盖一层半透明或者特定颜色的...

    标签(Tabs)实现多页面切换

    在网页设计中,标签(Tabs)是一种常见的用户界面元素,用于组织和展示多个相关的但内容独立的部分。这种设计模式允许用户通过点击不同的标签来切换查看不同页面,提高用户体验,因为它减少了页面之间的跳转,使内容...

    AJAX JSP DIV 聊天室练习实例

    【AJAX JSP DIV 聊天室练习实例】是一个典型的Web开发项目,它整合了AJAX、JSP和HTML的DIV元素,用于创建一个实时交互的在线聊天平台。在这个实例中,我们将深入探讨这三个技术如何协同工作,构建出一个高效、用户...

    jquery ajax实例点击按钮触发Ajax loading

    在网页开发中,jQuery AJAX是一种常用的异步数据通信技术,它允许我们在不刷新整个页面的情况下与服务器进行数据交互。在本实例中,我们将探讨如何利用jQuery的AJAX功能,通过点击按钮来触发一个加载动画(通常表现...

    div+css web 对话框+ajax封装js文件

    它们可以是模态的(阻止用户与页面其他部分交互)或非模态的(允许用户同时操作多个部分)。常见的对话框实现有JavaScript的alert()、prompt()和confirm()函数,但这些内置对话框功能有限。使用div和CSS,开发者可以...

    AJAX试题

    同一个函数可以被附属到多个对象上。 - **正确答案**: c.函数附属于它所附加到的对象上,只能通过该对象访问 - **解析**: 在JavaScript中,函数是对象的一种,它们可以通过多种方式访问和使用,不仅仅限于它们被...

    jquery弹出div+异步加载数据

    综上所述,"jquery弹出div+异步加载数据"项目涵盖了jQuery中的div操作、事件处理、动画效果、Ajax异步通信等多个重要知识点,这些技术在现代网页开发中有着广泛的应用。通过学习和实践这样的项目,开发者能够提升对...

    JQuery实现的传统页面DIV排序删除

    本教程将深入讲解如何使用 `jQuery` 在一个基于 `ThinkPHP` 框架的项目中实现页面 `DIV` 的排序与删除功能。 首先,让我们了解 `jQuery` 是什么。`jQuery` 是一个快速、简洁的 JavaScript 库,它简化了HTML文档遍历...

    HTML、jQuery、Ajax

    jQuery的核心特性包括选择器(用于快速定位DOM元素)、链式操作(多个方法调用可连续书写)和插件系统(扩展功能)。例如,通过一行jQuery代码`$('div').hide()`,就可以隐藏所有div元素,这在纯JavaScript中需要写...

    java调用ajax实时监测用户名是否存在

    这个过程可以通过结合Java后端和Ajax前端技术实现,提供实时、无刷新的用户体验。...这个过程中涉及到HTML表单、JavaScript、jQuery、Spring MVC、数据库查询等多个技术环节,需要对这些技术有深入理解才能有效地实现。

    学习ajax的文档——ajax基础文档

    在上面的例子中,我们创建了一个新的`div`元素,将其内容设置为服务器返回的消息,然后将它添加到页面的底部。 总结,Ajax通过JavaScript实现了网页的局部刷新,提升了用户体验,减少了网络通信的开销。理解并掌握...

    DWR是作为远程调用的ajax框架[参照].pdf

    3. **批量调用**:允许一次发送多个请求,减少了网络延迟。 4. **异步与同步调用**:支持异步和同步两种调用模式,满足不同场景的需求。 5. **缓存**:DWR有内置的缓存机制,可以提高性能,避免不必要的服务器请求。...

    AJAX局部刷新

    AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的...它广泛应用于网页的动态加载、搜索结果的实时更新、表单验证等多个场景。在实际应用中,开发者需要注意兼容性、性能优化以及安全等问题。

    AJAX学习总结(一)--基于jQuery第一个实例

    在本篇“AJAX学习总结(一)--基于jQuery第一个实例”中,我们将探讨如何使用jQuery库实现异步JavaScript和XML(AJAX)技术。AJAX允许我们在不刷新整个页面的情况下,更新网页的部分内容,从而提供更流畅的用户体验...

Global site tag (gtag.js) - Google Analytics