注意元素所在的“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");
    });
 });

我更喜欢使用选择器，并将其应用于文档。

这将自身绑定到文档上，并将适用于页面加载后呈现的元素。

例如：

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

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

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

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


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

将事件绑定到已存在的父级：

$(document).on("click", "selector", function() {
    // Your code here
});

这是一个没有任何库或插件的纯JavaScript解决方案：

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        // .bu clicked
        // Do your thing
    } else if (hasClass(e.target, 'test')) {
        // .test clicked
        // Do your other thing
    }
}, false);

其中hasClass是

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

现场演示

Dave和Sime Vidas的功劳

使用更现代的JS，hasClass可以实现为：

function hasClass(elem, className) {
    return elem.classList.contains(className);
}

下面嵌入了相同的jsfiddle Live演示：

函数hasClass（elem，className）{return elem.classList.contains（className）；}document.addEventListener（'click'，函数（e）{if（hasClass（e.target，'bu'））{警报（'bu'）；document.querySelector（'.bu'）.innerHTML='<div class=“bu”>bu<div class=”tu“>tu</div></div>'；}else if（hasClass（e.target，'test'））{警报（“测试”）；}否则if（hasClass（e.target，'tu'））{警报（'tu'）；}}，假）；测验.bu，.tu文件{边框：1px实心灰色；填充：10px；边距：10px；}<div class=“test”>测试<div class=“bu”>bu</div>测试</div>

另一种创建元素和绑定事件的灵活解决方案（源代码）

// creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});

//creating a dynamic button
 var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });

// binding the event
 $btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
    console.log('clicked');
 });

// append dynamic button to the dynamic container
$div.append($btn);

// add the dynamically created element(s) to a static element
$("#box").append($div);

注意：这将为每个元素创建一个事件处理程序实例（在循环中使用时可能会影响性能）