jQuery Динамический контент не работает

-1

Я создаю код, где я динамически добавляю содержимое, добавляя элемент ul.jQuery Динамический контент не работает

Дело в том, что если я нажимаю динамически созданную кнопку под названием 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"); 
});

источник

2013-10-01 Jake Snake

Да, так что ваша попытка с помощью .он ("щелчок") не работает? – Trevor

Да, теперь я чувствую себя довольно глупо. Время выходить и получать свежий воздух, я полагаю, –

Вы должны поставить селектор для динамического элемента в аргументе селектора:

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

источник

2013-10-01 17:09:41 Barmar

on() работает только с динамическими элементами, если это он делегирован:

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

источник

2013-10-01 17:09:21 adeneo

Поскольку динамически создавшего .on() нуждается в более широкую сферу применения:

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

Теперь код будет прослушивать button[name=savePalette], нажав на тег <body>, который всегда существует.

Если вы динамически добавлять ul.palettes и все его вложенные элементы, то вы будете хотеть, чтобы слушать изменения внутри тела, а не в пределах ul

источник

2013-10-01 17:10:02 MonkeyZeus

хм, интересно, что его слушатель тоже работает –

Как же это работает для меня? Ах да, вместо того, чтобы использовать

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

использование: $("li.paletteGroup").fadeIn();

увидеть это jsFiddle

источник

2013-10-01 17:23:49

jQuery Динамический контент не работает

ответ

Смежные вопросы