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委托事件方法{。}}。

使用

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

委派事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

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

1 个答案: