这是通过事件委派完成的。事件将在包装器类元素上获得绑定，但将被委托给选择器类元素。这就是它的工作原理。

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

和HTML

<div class="wrapper-class">
    <button class="selector-class">
      Click Me!
    </button>
</div>    

#注：包装器类元素可以是任何东西，例如文档、主体或包装器。包装应该已经存在。然而，选择器不一定需要在页面加载时显示。它可能会在稍后出现，并且事件将毫无失败地绑定到选择器上。

这是通过事件委派完成的。事件将在包装器类元素上获得绑定，但将被委托给选择器类元素。这就是它的工作原理。

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

和HTML

<div class="wrapper-class">
    <button class="selector-class">
      Click Me!
    </button>
</div>    

#注：包装器类元素可以是任何东西，例如文档、主体或包装器。包装应该已经存在。然而，选择器不一定需要在页面加载时显示。它可能会在稍后出现，并且事件将毫无失败地绑定到选择器上。

创建对象时，可以将事件添加到对象中。如果您在不同的时间向多个对象添加相同的事件，那么创建命名函数可能是一种方法。

var mouseOverHandler = function() {
    // Do stuff
};
var mouseOutHandler = function () {
    // Do stuff
};

$(function() {
    // On the document load, apply to existing elements
    $('select').hover(mouseOverHandler, mouseOutHandler);
});

// This next part would be in the callback from your Ajax call
$("<select></select>")
    .append( /* Your <option>s */ )
    .hover(mouseOverHandler, mouseOutHandler)
    .appendTo( /* Wherever you need the select box */ )
;

另一种解决方案是在创建元素时添加侦听器。不是将监听器放在主体中，而是在创建元素的瞬间将监听器放入元素中：

var myElement = $('<button/>', {
    text: 'Go to Google!'
});

myElement.bind( 'click', goToGoogle);
myElement.append('body');


function goToGoogle(event){
    window.location.replace("http://www.google.com");
}

您可以简单地将事件绑定调用包装成一个函数，然后调用它两次：一次在文档就绪时调用，一次在添加新DOM元素的事件之后调用。如果这样做，您将希望避免在现有元素上绑定同一事件两次，因此您需要解除现有事件的绑定，或者（更好）只绑定到新创建的DOM元素。代码看起来像这样：

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});
}

$(document).ready(function(){
    addCallbacks($(".myEles"))
});

// ... add elements ...
addCallbacks($(".myNewElements"))

使用jQuery的.on（）方法http://api.jquery.com/on/将事件处理程序附加到活动元素。

从1.9版起，live（）方法也被删除。