Как правильно использовать .on?

Question

[Никита Решетняк]

Доброго времени суток! Помогите разобраться как заставить конструкцию работать.

Такая разметка:

<form formid="menuForm">
	<div class="menuForm">
		<div class="form-group">
				<label for="title">Название меню</label>
				<input type="text" class="form-control menu-name" placeholder="Укажите название меню" value="Боковое">
			</div>

			<div class="menu-item">
				<div class="AJAX-menu-loading">
					<div class="overlay"></div>
					<img src="/web/images/gears-loading.gif">
				</div>

				<div class="form-group">
					<label for="title">Отображаемое имя пункта меню</label>
					<input type="text" class="form-control title" placeholder="Укажите отображаемое имя пункта меню" value="Главная">
				</div>
				<div class="form-group destinations">
					<label for="Keywords">Куда ведет</label>
					<div class="destinations-block" >
						<select class="form-control" id="destinationType">
							<option value="empty"></option>
							<option value="main">Базовые</option>
						</select>
						<select class="form-control" id="destinationPoint">
							<option value="empty"></option>
							<option value="/">Главная</option>
							<option value="#">Заглушка</option>
						</select>
					</div>
				</div>
			</div>
	</div>
	<button type="button" class="btn btn-warning add_menu_item"><i class="fa fa-plus" aria-hidden="true"></i></button>
</form>

При нажатии на кнопку + должен клонироваться элемент menu-item при этом включиться AJAX-menu-loading для анимации загрузки, причем хочу что бы работало на каждом в отдельности menu-item.

Я так понял что нужно воспользоваться .delegate он же .on что бы учитывались и новосозданные элементы. Сейчас так, но не пашет:

$( ".menuForm" ).on(
        "click", $(".add_menu_item"), function() {
            alert("AAAAAAAAAAAAAA");

            $(".AJAX-menu-loading").fadeIn(100);
            $(".menu-item").clone().appendTo(".menuForm");
            $(".AJAX-menu-loading").fadeOut(100);

        });

ПыСы: Прошу сильно не пинать.

Answer 1

[Антон Литвиненко]

$( ".menuForm" ).on(
"click", ".add_menu_item", function() {
    alert("AAAAAAAAAAAAAA");

    $(".AJAX-menu-loading").fadeIn(100);
    $(".menu-item").clone().appendTo(".menuForm");
    $(".AJAX-menu-loading").fadeOut(100);

});

Comments

[Никита Решетняк]

Нет реакции

[Антон Литвиненко]

Никита Решетняк, то есть даже алерт не работает?

[Никита Решетняк]

Вообще

[Антон Литвиненко]

оно и не будет работать. Я переписал как правильно второй параметр передать, но у вас то кнопка не лежит внутри класса menuForm. Она лежит на том же уровне.
Делегирование подразумевает, что у вас есть общий родитель - например форма. А в ней скажем десяток итемов, и у каждого есть такая своя кнопка. И для того чтобы не вешать обработчик на каждую кнопку применяют делегирование. В вашем случае зачем оно вообще

[Никита Решетняк]

Антон Литвиненко, Да затупил, в итоге оверлей сделал на всю форму, но это пригодилось при удалении пунктов, так что все рано спасибо!