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

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

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

动态创建的元素上的事件绑定

单个元素：

$(document.body).on('click','.element', function(e) {  });

子元素：

 $(document.body).on('click','.element *', function(e) {  });

注意添加的*。将为该元素的所有子级触发事件。

我注意到：

$(document.body).on('click','.#element_id > element', function(e) {  });

它已经不起作用了，但它以前也起过作用。我一直在使用谷歌CDN的jQuery，但我不知道他们是否改变了它。

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

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

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

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

当使用jQuery（html，属性）动态创建时，可以将事件附加到元素。

从jQuery1.8开始，任何jQuery实例方法（jQuery.fn的方法）都可以用作传递给第二个参数：

函数handleDynamicElementEvent（事件）{console.log（事件类型，此值）}//创建事件并将其附加到动态元素jQuery（“<select>”{html:$.map（数组（3），函数（_，索引）{返回新选项（索引，索引）}),日期：{更改：handleDynamicElementEvent}}).appendTo（“正文”）；<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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