JQuery On Click 事件不使用 JS 创建的元素触发

Question

我仍在学习 JS 和 JQuery，并且遇到了 on click 事件未触发的问题。 我创建了一个菜单，其标题应该是可点击的。

            var title = document.createElement('h1');
            title.textContent = "HW Tools";
            title.className += "SelectableMenu";
            hwSection.appendChild(title);

在 Jquery 部分，我有：

    $(document).ready(function () {
        $("#Menu_HW_Main").on('click', '.SelectableMenu', function () {
            alert("Test");
        })

其中 #Menu_HW_Main 是包含菜单的 div 的 id。 但是，当我单击标题时，警报不显示。

当我在 DOM 中创建标题/菜单时，事件触发得很好。 但是当我通过 JS 创建它时，它不会触发。 我错过了什么？

Answer 1

您的代码看起来不错，但您可以只使用jQuery来创建h1而不是混合 vanilla JS ：

var h1 = $('<h1/>', {'text':'HW Tools', 'class':'SelectableMenu'});

$("#Menu_HW_Main").append(h1);

如果"#Menu_HW_Main"也是一个动态（由js创建）元素，那么试试这个：

$(document).on('click', '.SelectableMenu', function () {
    alert("Test");
});