Jquery第二个函数调用不工作

Question

嗨，我是一个新手，刚刚开始使用JQuery。我已经创建了一个函数- createGrid-并将其保存为var。我在$(document)上调用这个函数。准备好了，它起作用了。当我尝试在。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)中。准备好了，但我觉得。click事件不应该包括在这里面。但是，当我先结束。ready，并且不包含。click事件时，它们根本无法触发。是否有必要让所有的事件代码内运行。ready或我只是做错了?由于

Answer 1

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

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

使用

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

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