jQuery动态内容的点击不起作用[重复]答案

【问题标题】：jQuery Dynamic content's click doesn't work [duplicate]jQuery动态内容的点击不起作用[重复]
【发布时间】：2013-10-07 22:58:40
【问题描述】：

我正在编写代码，通过附加 ul 元素动态添加内容。

问题是，如果我点击动态创建的名为 savePalette 的按钮，它就不起作用了。虽然它对第一个按钮起作用，因为我在点击函数之前定义了 addPalette 函数。

根据我的阅读，.on() 应该在这些添加动态内容的情况下工作。

这是 HTML 结构：

<ul class="palettes">
    <li class="paletteGroup">
        <ul>
            <li class="colorpalette" style="background-color: #00c4ff;"></li>
            <li class="colorpalette" style="background-color: #00a6ff;"></li>
            <li class="colorpalette" style="background-color: #0091ff;"></li>
            <li class="colorpalette" style="background-color: #007bff;"></li>
            <li class="paletteControls">
                <button name="savePalette" class="savePalette">Save</button>
                <button name="changeName" class="changeName">Change Name</button>
            </li>
        </ul>
    </li>
</ul>

JavaScript：

function addPalette() {
        var defaultColors = ["#00c4ff", "#00a6ff", "#0091ff", "#007bff"];

        $("ul.palettes").append("<li class=\"paletteGroup\"><ul>" +
        "<li class=\"paletteControls\"><button name=\"savePalette\" class=\"savePalette\">Save</button>" +
        "<button name=\"changeName\" class=\"savePalette\">Change Name</button></li>" +
        "</li></ul></li>");
        $("li.paletteGroup:last").hide();

        for(var i = 1; i <= 4; i++) {
            var j = (4 - i);
            $("ul.palettes li.paletteGroup:last ul").prepend("<li class=\"colorpalette\" style=\"background-color:" + defaultColors[j] + "\"></li>");
        }

        $("li.paletteGroup").show("fade", 500);
    }

然后这个在脚本标签的顶部

addPalette();

$("button[name=savePalette]").on("click", function() {
    alert("Heeeeej");
});

【问题讨论】：

是的，所以您使用 .on("click") 的尝试不起作用？
是的，我现在觉得自己很愚蠢。我想是时候出去呼吸新鲜空气了

标签： javascript jquery dynamic click

【解决方案1】：

您必须将动态元素的选择器放在选择器参数中：

$("ul.palettes").on("click", "button[name=savePalette]", function() {
    alert("Heeeej");
});

【讨论】：

【解决方案2】：

on() 仅适用于动态元素，如果它是委托的：

$("ul.palettes").on("click", "button[name=savePalette]", function() {
    alert("Heeeeej");
});

【讨论】：

【解决方案3】：

由于它是动态创建的，.on() 需要更广泛的范围：

$('body').on("click", "button[name=savePalette]", function() {
    alert("Heeeeej");
});

现在代码将监听button[name=savePalette] 在始终存在的<body> 标记内被点击。

如果您要动态添加 ul.palettes 及其所有子元素，那么您将希望在正文中而不是在 ul 中监听变化

【讨论】：

嗯，有趣的是他的听众也可以工作

【解决方案4】：

它为什么对我有用？哦，是的，而不是使用

$("li.paletteGroup").show("fade", 500);

使用：$("li.paletteGroup").fadeIn();

看到这个jsFiddle

【讨论】：