事件绑定和取消绑定，重复弹出框问题

最近在做click的事件绑定，发现如果对事件绑定了两次click，就会弹出两次弹出框，最后找到了解决方案。

1.首先，说下对元素进行事件绑定的方法

<pre name="code" class="html">$("#myId").on("click", function (event) {
     window.alert("hello");
});

此时会弹出hello，但是有时候我们发现不止弹出一次hello，原因可能是我们对这个id绑定了多个click事件，如果我们只想弹出一次，这就要在绑定click事件前取消绑定过的click，这时我们可以用unbind，使用原理就是我们对事件进行了简单的判断，若绑定过事件，则不绑定，若没绑定则绑定事件。

$("#myId").unbind("click").on("click", function (event) {
     window.alert("hello");
});

2.其次，对动态生成元素绑定事件

在解决了重复绑定问题后，我发现这个绑定方法对js脚本动态生成的html没有左右，此时我们可以使用另一个绑定方法delegate

<pre name="code" class="javascript">$("body").delegate('#dynamic-table tr #detail', 'click', function () {
     alert("1);
});

这样我们就对动态生成的元素进行了绑定，对于重复绑定的问题可以使用undelegate解决

$("body").undelegate('#dynamic-table tr #detail', 'click');            
$("body").delegate('#dynamic-table tr #detail', 'click', function () {
     alert("1);
});

定义和用法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法

$(selector).delegate(childSelector,event,data,function)

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。