Вопрос: Почему он работает, когда элемент жестко запрограммирован в HTML, но не работает при динамическом добавлении через Jquery?
Я учу себя самому Jquery в рамках самообучения JavaScript, и я простосоздание простого приложения для устранения неполадок ради обучения.На самом деле мой код размещен здесь: https://repl.it/@jllrk1/OrganicBothRay.
Пока я его настраиваю, пользователь нажимает на блок заголовка для начала, который настроен с помощью функции одноразового щелчка для создания ULдля некоторых продуктов на моей работе, в которых мы предоставляем ИТ-услуги.
Затем я пытаюсь выбрать каждый продукт в этом списке, чтобы выполнить пошаговые инструкции по устранению неполадок для этого конкретного продукта (он будет ориентироваться на пользователя в зависимости от того, чтоони нажимают или вводят).
В целях тестирования я только что попытался получить фон элемента списка, в котором щелкают, чтобы изменить его на красный.
Я не могу заставить это работать, или моя консоль.log to fire сообщает мне, что функция не вызывается.
однако, если я жестко запрограммировал ul в html, используя тот же код для событий щелчка, он работает просто отлично.
Я что-то не так делаю?
Просто хочу лучше понять!
$(function () {
//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
//set up variables
//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
//var $liItems = $('.product li');
var $chief = $(".chiefblock");
var $container = $("#container");
var $this = $(this);
var $error = '';
var initList = function () {
console.log("initList initiated");
$container.append('<div class="product"><ul><li>TASC</li><li>TABE</li><li>Las Links</li><li>TerraNova</li><li>E-Direct</li></ul></div>');
$("p").text("Start by selecting a product");
}
var navItems = function (event){
console.log("navItems initiated");
var target = $(event.target);
if (target.is("li") ) {
target.css("background-color", "red" );
}
}
var nObject = function () {
$container.append('<div id = "tasc"><h2>Tasc</h2><p></p></div></div>');
$('#newItem').prepend('<h2>Item</h2>');
}
$('.chiefblock').one('click', initList)
//$('li').on('click', navItems) this i tried and does not work
$('#newObject').on('click', nObject)
$('ul').on('click', navItems)
//$liItems.on('click', navItems)this i tried and does not work
});