jquery第二个函数调用不起作用

Question

您好，我是菜鸟，刚开始使用 JQuery。 我创建了一个函数 - createGrid- 并将其保存为 var。我在 $(document).ready 上调用这个函数，它可以工作。当我尝试在 .click 上再次调用此函数时，它什么也不做。我有另一个由同一个 .click 触发的函数，它可以工作。

我知道可以在一个事件上调用两个函数，我查看了很多不同的示例，但无法弄清楚我做错了什么。
这是我的代码：

var createGrid = function() {
    for (i = 0; i < num; i++) {
        $(".container").prepend("<div class='myDiv'></div>");
    }
};
$(document).ready(function() {
    createGrid();
    $(".navbar").prepend('<button class="btn shake">Shake</button>')
    $(".navbar").prepend('<button class="btn size">Pen Size</button>')
    $(".myDiv").mouseenter(function() {
        $(this).addClass("hover");
    })
    $(".shake").click(function() {
        $(".myDiv").fadeOut();
        $(".shake").click(createGrid);
    });
});

我也尝试过像这样运行最后一部分，但这也没有用。

    $(".shake").click(function()
    $(".myDiv").fadeOut();
    });
    $(".shake").click(function() {
    createGrid();
    });

还有这样的

    $(".shake").click(function()
    $(".myDiv").fadeOut();
    createGrid();

我错过了什么？

此外，我已将所有这些都包含在 $(document).ready 中，但我觉得 .click 事件不需要包含在其中。但是，当我结束 .ready 之前，并且不包括 .click 事件时，它们根本无法触发。是否有必要让所有事件代码在 .ready 中运行，还是我做错了？ 谢谢

Answer 1

事件处理程序仅绑定到当前选定的元素；在您的代码进行事件绑定调用时，它们必须存在于页面上。

当您动态创建元素时。您需要使用 Event Delegation 和 .on() 委托事件方法。

使用

$(".container").on('mouseenter', ".myDiv", function(){
    //Your code
});
$(".navbar").on('click', ".shake", function(){
    //Your code
});

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。