Question

我似乎无法弄清楚为什么当我创建一个带有按钮的新div时，该按钮不会响应我指定的点击功能。我确定我的语法搞砸了。理想情况下，当我单击“新类别”按钮时，将在包含它的主题div中创建一个新的类别div，但它甚至不会响应警报功能。

$(":button.Topic").click(function (event) {
    $("body").append(TopicDiv);
});

//when Category class button is clicked, append Category Div to parent of button clicked
$("button").on("click", function () {
    alert("Hello!");
    /*$( this ).parentNode.append(CategoryDiv);*/
});

这是jsFiddle：http://jsfiddle.net/KrsVp/5/

Answer 1

您应该使用事件委派：

$(document).on("click", ":button.Category", function () {
    alert("Hello!");
    /*$( this ).parentNode.append(CategoryDiv);*/
});

这个想法是让父元素听取事件，然后让它检查是否有任何子元素与:button.Category选择器匹配。

最接近父母，表现最佳[即如果可能，请不要使用document。

Answer 2

当您执行以下操作时：

$("button").on("click", ...

您正在将事件处理程序附加到与该选择器匹配的任何元素。当执行该行代码时，动态添加的元素不存在，因此这些元素不会附加事件处理程序。

但是，当您执行以下操作时：

$(document).on("click", "button", ...

您正在将事件处理程序附加到document元素并将事件委托给其中的任何按钮元素，这可确保动态添加的元素仍将正确触发此处理程序。

Answer 3

问题是您的按钮尚未添加到DOM中。您的代码仅在单击OTHER DIV的子按钮时创建DIV。但是，DIV或其子按钮都不存在。因此，DIV都不存在被点击。并且，如果DIV出现在DOM的就绪状态，则需要将点击附加到添加的DIV按钮。

动态添加按钮不起作用

3 个答案: