jQuery给动态生成的元素添加事件

有时需要向页面内动态添加元素，其中可能还需要给这些追加的元素绑定事件，这时候采用jquery是很方便的。
1、采用live()方法（该方法于1.7版本后废弃）：
live()方法可以给所有元素附加一个事件处理函数，甚至包含动态添加的元素，其采用事件委托的处理方式，事件委托的原理是（如点击元素）：
点击某个元素，因为该元素并未绑定任何事件处理函数，事件由DOM树冒泡到绑定了特殊事件处理函数的上层节点(一般是根节点)，执行特殊的事件处理函数，这个特殊函数检测是哪个元素被点击，并可判断该元素是否符合某一条件，若符合条件，则在该元素上执行一个事件处理函数。
例如：

$("li").live({
  click: function() {
    // do something on click
  },
  mouseover: function() {
    // do something on mouseover
  }
});

2、采用delegate()方法
delegate()方法可作为live()方法的替代，使得每次事件绑定到特定的DOM元素,不一定就是根节点，例如：

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

3、采用on()方法
在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，例如：

$("table").on("hover", "td", function(){
    $(this).toggleClass("hover");
});

还有一种情况，我们需要给动态生成的元素添加插件方法，这里以Timepicker为例，一般情况下我们是这样调用的：

$('#timeEle').timepicker({
    maxHours : 24,
    minuteStep: 1,
    secondStep: 1,
    minuteStep: 1,
    appendWidgetTo: 'body',
    showSeconds: true,
});

如果id为timeEle的元素是动态生成的，这样调用就不行了，可以参照上面的几种方法，结合插件的方法特点及本身项目所需体验对代码稍加改善(这里结合项目体验的特点绑定为鼠标移动事件)：

$(document).on('mousemove','#timeEle',function(){
    $(this).timepicker({
        maxHours : 24,
        minuteStep: 1,
        secondStep: 1,
        minuteStep: 1,
        appendWidgetTo: 'body',
        showSeconds: true,
    });
    return false;
});