两点关于jQuery的注意事项
2015-06-06 17:19
555 查看
问题:
我要写一个动态加载输入问题和选项的组件,如图所示:
初始化状态:
![](https://img-blog.csdn.net/20150606172216659?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGhlM3o=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
运行效果:
![](https://img-blog.csdn.net/20150606172120554?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGhlM3o=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
问题1:
当点击”添加问题“的时候,动态加入一个大的节点,每一个问题后面都有一个”添加选项“的按钮。需要给这个按钮添加事件,点击再去加入选项的节点。初始化给这类按钮添加事件是不可行的,因为页面一加载进来的事件对之后动态添加的节点是无效的,所以要再绑定一个事件。这里有问题!因为你绑定的事件也会给之前存在的节点再绑定一次,结果导致你点击之前的按钮,会触发多次。所以就要在绑定新节点的事件之前,把之前的都清理掉,保证页面上所有按钮都只有一个绑定事件。解决代码如下:
问题2:
在删除选项的时候,要对之后的选项进行排序,1234,删除了2,应该是123。
一开始我的处理是:点击删除选项的按钮,就remove这个节点的父节点,也就是这整个选项区域(事件绑定在那个<a>上面),再去获取这个节点的父节点的父节点,然后获取全部的子节点,就知道现在有几个选项。问题就是死活获取不到,这个是根本不可能获取到任何父节点的,这个节点都删了,就不存在这个节点了,如何取到父节点。所以要在删除选项之前把这个父节点的父节点获取到。之后再做处理。
这里纯属于我个人在实际问题中的一些心得体会,可能对问题解决的方法不是特别严谨,欢迎指正交流。
我要写一个动态加载输入问题和选项的组件,如图所示:
初始化状态:
运行效果:
问题1:
当点击”添加问题“的时候,动态加入一个大的节点,每一个问题后面都有一个”添加选项“的按钮。需要给这个按钮添加事件,点击再去加入选项的节点。初始化给这类按钮添加事件是不可行的,因为页面一加载进来的事件对之后动态添加的节点是无效的,所以要再绑定一个事件。这里有问题!因为你绑定的事件也会给之前存在的节点再绑定一次,结果导致你点击之前的按钮,会触发多次。所以就要在绑定新节点的事件之前,把之前的都清理掉,保证页面上所有按钮都只有一个绑定事件。解决代码如下:
$(".addOption").unbind("click"); $(".addOption").click(function(){ addOption(this); });
问题2:
在删除选项的时候,要对之后的选项进行排序,1234,删除了2,应该是123。
一开始我的处理是:点击删除选项的按钮,就remove这个节点的父节点,也就是这整个选项区域(事件绑定在那个<a>上面),再去获取这个节点的父节点的父节点,然后获取全部的子节点,就知道现在有几个选项。问题就是死活获取不到,这个是根本不可能获取到任何父节点的,这个节点都删了,就不存在这个节点了,如何取到父节点。所以要在删除选项之前把这个父节点的父节点获取到。之后再做处理。
function delOption(node){ var optsAreas = $(node).parent().parent(); $(node).parent().remove(); var options = $(optsAreas).children(); var optsLength = $(options).length; var i = 1; $(options).each(function(){ $(this).find('.order-option').html(i); if(i<optsLength){ i++; } }); }
这里纯属于我个人在实际问题中的一些心得体会,可能对问题解决的方法不是特别严谨,欢迎指正交流。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- JQuery 初体验(建议学习jquery)
- 在flex中执行一个javascript方法的简单方式
- Jquery实现的table最后一行添加样式的代码
- jQuery 练习[一] 学习jquery的准备工作