如何通过从$ .ajax()检索到的DOM访问元素？

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加载到具有ID的div中contentBox:

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

但是,当我单击加载的段落时,不会弹出警告框.当涉及通过AJAX加载的元素时,我认为我没有正确访问DOM.我怎样才能解决这个问题？

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 docs:

提供选择器时,事件处理程序称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序.