javascript - 将事件处理程序绑定到动态生成的 div 的问题

Question

我在警报窗口的屏幕上显示单击的 div 的 id 时遇到问题。我非常有信心这是因为添加到页面的控件和事件处理程序的顺序，但是在尝试了不同的方法之后，我无法让它工作。不幸的是，由于 div 是从 ajax 获取请求创建的，因此我无法发布可重现的代码。

$(document).ready(function () {
    $.getJSON('ClientPortal/GetSkills', function (data) {
        var test = 'poo';
        $.each(data, function (data) {
            $('#flipContainer').append("<div class=flip id='" + this.Value + "' value='" + this.Value + "'>" + this.Text + "<//div>");
        })
    })
})

$(document).ready(function () {
    $(".flip").on('click', function () {
        alert($(this).attr("id"));
     })
})

Answer 1

试试这个 ：

$(document).ready(function () {
    $("#flipContainer").on("click", ".flip", function () {
        alert($(this).attr("id"));
     })
})

当 DOM 就绪事件触发时，您实际上必须将单击绑定基于现有元素...但是使用此语法，您可以将绑定委托给现有元素，但它适用于第一个元素中包含的另一个元素...请参阅on（对于“选择器”行）的 jQuery 文档：http: //api.jquery.com/on/#on-events-selector-data-handlereventObject。