我正在创建一个代码,我通过附加一个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");
});
答案 0 :(得分:7)
您必须将动态元素的选择器放在selector参数中:
$("ul.palettes").on("click", "button[name=savePalette]", function() {
alert("Heeeej");
});
答案 1 :(得分:2)
on()
仅适用于动态元素(如果已委托):
$("ul.palettes").on("click", "button[name=savePalette]", function() {
alert("Heeeeej");
});
答案 2 :(得分:1)
由于它是动态创建的,.on()
需要更广泛的范围:
$('body').on("click", "button[name=savePalette]", function() {
alert("Heeeeej");
});
现在,代码会在button[name=savePalette]
标记内点击<body>
,该标记始终存在。
如果您动态添加ul.palettes
及其所有子元素,那么您需要在正文中而不是在ul
答案 3 :(得分:1)
怎么对我有用? 哦是的,而不是使用
$("li.paletteGroup").show("fade", 500);
使用:$("li.paletteGroup").fadeIn();
请参阅此jsFiddle