@trjflash
Системщик мед центра онклиник

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

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

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

<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);

        });


ПыСы: Прошу сильно не пинать.
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
$( ".menuForm" ).on(
"click", ".add_menu_item", function() {
    alert("AAAAAAAAAAAAAA");

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

});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы