两点关于jQuery的注意事项

问题：

我要写一个动态加载输入问题和选项的组件，如图所示：

初始化状态：

运行效果：

问题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++;
		}
	});
}

这里纯属于我个人在实际问题中的一些心得体会，可能对问题解决的方法不是特别严谨，欢迎指正交流。