javascript - 动态添加的按钮不起作用

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

您应该使用事件委托(delegate):

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

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

最接近的 parent ，表现最好[即。如果可能的话，不要使用document]。