Обработка событий из встраимого в станицу HTML кода

Question

[Денис Байдаров]

Уважаемые знатоки, не знаю как корректно задать вопрос, поэтому возможны неточности.
Имеется страница с Во время загрузки страницы в этот контейнер подставляется нужный мне кусок страницы, например, приветствие. Но вот если мне нужно, например, обработать нажатие кнопки на этой вставленной странице, то код не срабатывает, срабатывает только за пределами контейнера. Как быть?
Пример JS кода:
// При загрузке документа
$(document).ready(function () {
// тут показываем анимацию «загрузка»
//…
var rendered_html;

// Получаем следующий вопрос, или результат теста, или еще что-то через ajax:
$.post(
'/ajax/test',
{},
function (data) {
// Рендерим шаблон передавая ему данные полученные от скрипта
rendered_html = twig({ ref: «begin_test» }).render(data);
// снимаем анимацию «загрузка»
//…
// Получившийся HTML пихаем на нужно место в странице
$('DIV#container').html(rendered_html);
},
'json'
);

$('#start').click(function () {
alert('test');
});

});
Собственно, нажатие элемента #start и не срабатывает.
P.s Использую шаблонизатор TWIG поэтому и такие пляски с встраиванием :D
Заранее спасибо.

Answer 1

[Сергей Протько]

Вы пытаетесь привязать событие к эллементу, которого еще нету на странице. Варианта 2:
1) использовать делегаты

$('#container').on('click', '#start', callback);

2) навешивать событие после вставки элемента в DOM (в success калбэке). Но это как по мне моветон.

Результат должен выглядеть как-то так:

$(function () {
    var $container = $('#container');
    $.post('/ajax/test', {}, function (data) {
        $container.html(twig({ ref: «begin_test» }).render(data));
    });

    $container.on('click', '#start', clickCallback);
});

Comments

[Денис Байдаров]

Ваш вариант мне тоже очень нравится, он удобнее, тем, что можно все вынести из этой функции. Спасибо!

Answer 2

[Yuri Shikanov]

Я правильно понял, что #start находится в шаблоне, который загружается по ajax? Если да, то вам нужно вешать обработчик click внутри обработчика ajax-запроса, сразу после $('DIV#container').html(rendered_html);

Comments

[Денис Байдаров]

Огромное спасибо! :D Сижу маюсь и так и сяк пробую. В JS нуб. Кстати, еще работает метод, если в HTML привязать событие onclick и прописать функцию, тогда тоже срабатывает код. Но ваш вариант мне нравится больше, спасибо!

Answer 3

[BAV_Lug]

Вешайте обработчик следующим образом
$('#start').live('click', function(){
И не важно когда появиться на странице элемент #start

Comments

[BAV_Lug]

Посмотрел тут, в новых версиях jquery live заменили на on.

[Сергей Протько]

функцию live вообще никогда не рекомендовали к использованию, она просто была и все. Это делегат на уровне document. Мол когда событие на странице происходит, оно пробрасывается вверх по дереву, пока кто-то его не не остановит или же пока оно не дойдет до document. А уже в обработчике проверяется кто именно вызвал событие, и выполняется действие.

[Сергей Протько]

Сейчас аналог live это $(document).on('click', '#start', callback)