你可以使用

$('.buttons').on('click', 'button', function(){
    // your magic goes here
});

or

$('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

这两种方法是等效的，但具有不同的参数顺序。

请参见：jQuery委托事件

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

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

我正在寻找一种解决方案，使$.bind和$.unbind在动态添加的元素中工作时不会出现问题。

As on（）使用了附加事件的技巧，以便在我遇到的事件上创建一个假解绑：

const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );

// unbind the click
$('body').on('click', 'button.send', function(){} );

你可以使用

$('.buttons').on('click', 'button', function(){
    // your magic goes here
});

or

$('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

这两种方法是等效的，但具有不同的参数顺序。

请参见：jQuery委托事件

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

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

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


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

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