同一个页面多个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完全不同,在这里指出来也希望小伙伴你们汲取教训。

相关推荐