0

我似乎无法弄清楚为什么当我创建一个带有按钮的新 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/

4

3 回答 3

2

您应该使用事件委托：

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

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

最接近父级，性能最好[即尽可能不要使用document]。

于 2013-07-30T16:55:19.713 回答
0

当您执行以下操作时：

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

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

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

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

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

于 2013-07-30T16:56:41.407 回答
0

问题是您的按钮尚未添加到 DOM。您的代码仅在单击 OTHER DIV 的子按钮时创建 DIV。但是，DIV 或其子按钮都不存在。所以，DIV 都不存在被点击。而且，如果 DIV 在 DOM 的就绪状态下存在，您甚至需要将单击附加到添加的 DIV 按钮。

于 2013-07-30T16:57:43.417 回答