1

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");
});
4

4 に答える 4

7

動的要素のセレクターをセレクター引数に入れる必要があります。

$("ul.palettes").on("click", "button[name=savePalette]", function() {
    alert("Heeeej");
});
于 2013-10-01T17:09:41.723 に答える
2

on()委任されている場合にのみ、動的要素で機能します。

$("ul.palettes").on("click", "button[name=savePalette]", function() {
    alert("Heeeeej");
});
于 2013-10-01T17:09:21.473 に答える
1

なぜそれが私のために働くのですか？そうそう、使用する代わりに

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

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

このjsFiddleを参照してください

于 2013-10-01T17:23:49.467 に答える
1

動的に作成される.on()ため、より広い範囲が必要です。

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

これでコードは、常に存在するタグbutton[name=savePalette]内でクリックされるのをリッスンします。<body>

すべてのサブ要素を動的に追加する場合はul.palettes、内部ではなく本体内の変更をリッスンする必要がありますul

于 2013-10-01T17:10:02.620 に答える