Как получить доступ к элементам через DOM, полученный из $ .ajax ()?

Question

Я загрузил HTML-код с другой страницы через $.ajax:

<script type="text/javascript">
    $(function() {
        $.ajax({
            url: '/getInfo',
            context: $('#contentBox'),
            success: function(data) {
                $(this).html(data);
            }
        });
    });

    $(function() {
        $('#clickableElement').click(function() {
            alert("I work!");
        });
    });
 </script>

 <div id="contentBox"></div>

Код загружает этот HTML-код в div с идентификатором contentBox:

<p id="clickableElement">I'm clickable.</p>

Однако, когда я нажимаю на загруженный абзац, окно предупреждения не появляется. Я не думаю, что я правильно обращаюсь к DOM, когда дело доходит до элементов, загружаемых через AJAX. Как я могу это исправить?

Answer 1

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

on версия:

$('#contentBox').on('click', '#clickableElement', function () {
    alert( 'I work!' );
});

on документы :

Когда предоставляется селектор, обработчик событияупоминается как делегированный.Обработчик вызывается не тогда, когда событие происходит непосредственно в связанном элементе, а только для потомков (внутренних элементов), которые соответствуют селектору.jQuery переносит событие от цели события до элемента, к которому прикреплен обработчик (т. е. от самого внутреннего к внешнему элементу), и запускает обработчик для любых элементов на этом пути, соответствующих селектору.

Answer 2

Когда браузер запускает ваш скрипт, нет узла с id = clickableElement, вы должны отметить, что элемент может быть создан позже.

Для доступа к динамическим узлам DOM следует использовать функцию on() из jQuery.