Javascript 动态创建DOM后，jQuery.on（）方法不起作用

我做一个钮扣

var sectionbtn = document.createElement("button");
sectionbtn.className = "sections";

那么就在下面，我有

$(document).on('click', '.sections', function() {
        console.log("clicked");
    });

但什么都没有发生

我试过了

$(mainbody).on('click', '.sections', function() {
        console.log("clicked");
    });

其中，主体是.sections按钮的父级

---

我知道在这方面还有其他问题，但我已经尝试了许多不同的方法，似乎无法使其发挥作用。这有什么问题吗？

我会用不同的编码。既然您已经在使用jQuery，我将使用它的工具，如下所示：

$('body')
  .append(
    $('<button>')
      .addClass('sections')
      .html('Click me')
  );
$('body').on('click', 'button.sections', function() {
    alert('clicked');
});

$（“正文”）
.附加(
$('')
.addClass（“节”）
.html（'单击我'）
);
$（'body'）。在（'click'，'button.sections'，function（）上{
警报（“点击”）；
});

下面是一个JSFIDLE：

---

我分离了点击处理器，这样您就可以处理多个部分。

按钮是在DOM中添加的吗？它在这里工作：我想您错过了

document.body.appendChild（sectionbtn）

在绑定之前，您必须先在DOM中附加它，然后单击@ParthTrivedi sectionbtn将附加到一个div，该div依次附加到document.body。但是如果我在页面上有多个带有“sections”类的按钮，并且希望有一个代码可以触发所有这些按钮，该怎么办？您可以调用dynamic created element event如下所示：$（document.body）.on（'click'，'button.sections'，function（）{alert（'clicked'）；}）@Annshuk，为什么要使用document.body而不是“body”？实际上，我通常会引用一个div，而不是一直引用body标记。@WilliamSchroederMcKinley，我们实际上没有提供任何父选择器，因此为了演示，

$（'body'）

很好。@Annshuk，一般来说，我希望引用越具体，查询速度就越快，但这只是我的直觉。这项速度测试表明2号车非常接近：。但我自己不能这么说。总而言之，我通常更喜欢“body”，因为它更符合我通常引用事物的方式。