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

Уважаемые знатоки, не знаю как корректно задать вопрос, поэтому возможны неточности.
Имеется страница с Во время загрузки страницы в этот контейнер подставляется нужный мне кусок страницы, например, приветствие. Но вот если мне нужно, например, обработать нажатие кнопки на этой вставленной странице, то код не срабатывает, срабатывает только за пределами контейнера. Как быть?
Пример 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
Заранее спасибо.
  • Вопрос задан
  • 3338 просмотров
Решения вопроса 1
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Вы пытаетесь привязать событие к эллементу, которого еще нету на странице. Варианта 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);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
dizballanze
@dizballanze
Team Lead at WB—Tech
Я правильно понял, что #start находится в шаблоне, который загружается по ajax? Если да, то вам нужно вешать обработчик click внутри обработчика ajax-запроса, сразу после $('DIV#container').html(rendered_html);
Ответ написан
@BAV_Lug
Вешайте обработчик следующим образом
$('#start').live('click', function(){
И не важно когда появиться на странице элемент #start
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
NewTech Екатеринбург
от 70 000 до 120 000 руб.
от 2 000 до 2 500 usd.