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

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

和HTML

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

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

注意元素所在的“MAIN”类，例如，

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

在上述场景中，jQuery将监视的MAIN对象是“容器”。

然后，您将基本上在容器下具有元素名称，如ul、li和select：

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });

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

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 */ )
;

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

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

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

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

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

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

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


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

从jQuery 1.7开始，您应该使用jQuery.fn.on并填充选择器参数：

$(staticAncestors).on(eventName, dynamicChild, function() {});

说明：

这称为事件委派，其工作方式如下。事件附加到应该处理的元素的静态父级（staticAncestors）。此jQuery处理程序在每次事件触发此元素或子元素之一时都会触发。然后，处理程序检查触发事件的元素是否与选择器（dynamicChild）匹配。如果匹配，则执行自定义处理程序函数。

在此之前，建议使用live（）：

$(selector).live( eventName, function(){} );

然而，live（）在1.7中被弃用，而在1.9中被完全删除。live（）签名：

$(selector).live( eventName, function(){} );

…可以替换为以下on（）签名：

$(document).on( eventName, selector, function(){} );

例如，如果您的页面正在动态创建类名为dosomething的元素，那么您可以将事件绑定到已经存在的父级（这是问题的症结所在，您需要绑定到现有的元素，而不是绑定到动态内容），这可以是文档（也是最简单的选项）。尽管记住文档可能不是最有效的选择。

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

绑定事件时存在的任何父级都可以。例如

$('.buttons').on('click', 'button', function(){
    // do something here
});

将适用于

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>