JQuery не работает на подгруженных слоях?

Question

[Николай]

Кусок кода выпадающего меню, всё работает прекрасно.
Проблемма, при подгрузке данных (в которых содержаться эти самые выпадающие списки)

$('.load').on('click', 'a', function () {
	var name = this.id,
	root = $(this).closest('.header-table').find('.load-data');
        $.get("mach/" + name + ".html", function (data) {
	$(root).html(data);
	});
});

При нажатии на кнопку - ничего не происходит.
Может кто-нибудь сталкивался, и знает как решить эту проблему :(

UPD:
Ребят, суть в чём: на странице всё работает ОТЛИЧНО, так как мне и надо.
но если я подгружаю файл, в котором есть этот выпадающий список - то при нажатии на баттон - ничего не происходит.
Т.е. проблема только в том, что баттон не работает после того, как он получен через $.get

Comments

[maximw]

Клик [Выберете транспорт], появляется меню справа. А что дальше не работает непонятно? При нажатии на какую кнопку ничего не происходит?

[Dmitriy Uvarov]

Вам надо осуществить вызов при нажатии на ссылку в списке, который появился?

[Николай]

maximw: дело не в этом. Говорю же, что на странице всё работает отлично. А стоит подргузить данные через $.get - кнопка не реагирует на клик (не появляется выпадающее меню)

[Николай]

Дмитрий Уваров: нет. когда я получаю страницу через $.get - при нажатии на кнопку ничего не происходит.

[Dmitriy Uvarov]

Уже в полученной странице вы жмете на кнопку? Или после получения страницы перестает эта кнопка работать?

[Николай]

Дмитрий Уваров: есть страница, с этим списком, в зависимости от выбранного элемента подргужается другая страница с дополнительными списками. Вот не работают только те списки, которые подргужаются

[Dmitriy Uvarov]

Николай: А какого поведения вы добиваетесь от вновь прибывших списков?

[Николай]

Дмитрий Уваров: ровно такого же, как и от старых. Это просто селект, грубо говоря

Answer 1

[maximw]

Вот ваш код который ставит действие по клику на кнопку.

$('.prefix-warp').on('click', '.prefix', function () {
        $(this).parent().find('ul.dropdown').css('display', 'block');
    });

Если элемент .prefix-warp также подгружается аяксом (.get()), то работать не будет. Вместо него нужно указать какой-то контейнер (другой элемент), который не подгружается, а уже есть на стрнице.

Например:

$('.load').on('click', 'a', function () {
  var name = this.id,
  root = $(this).closest('.header-table').find('.load-data');
        $.get("mach/" + name + ".html", function (data) {
  $(root).html(data);
  });
});
  $('.load-data').on('click', '.prefix', function () {
        $(this).parent().find('ul.dropdown').css('display', 'block');
    });

Comments

[Николай]

Спасибо! То, что надо :)
Только теперь подгруженные аяксом ссылки в списке срабатывают :) (хотя и стоит preventDefault(); )

[Николай]

Теперь проблема в том, что не срабатывает и код по клику подгруженных списков

$('ul.dropdown li a').on('click', function (e) {
        e.preventDefault();
        alert('do');
    });

Может у Вас есть идеи? )

[maximw]

Попробуйте e.stopPropagation(); ( https://api.jquery.com/event.stoppropagation/ )

[maximw]

Этот код должен вызываться каждый раз когда вы загружаете новый кусок.
$('ul.dropdown li a').on('click', function (e) {
e.preventDefault();
alert('do');
});
На пальцах, потому что этот код будучи вызаван срабатывает для уже имеющихся на странице (в dom-дереве), при появлении новых элементов, на них это не распространяется.

Тут есть два варианта:
1) Для этого нужен опять же конейнер который есть изначально на странице до подгрузки данных, и использовать
$('.existing_container').on('click', ''ul.dropdown li a', function () {});
2) С каждой загрузкой вызывать
$('ul.dropdown li a').off('click').on('click', function (e) {
e.preventDefault();
alert('do');
});
off() нужен для того чтоб обработчик клика не вызывался многократно на уже подгруженных ранее элементах.