Question

我通过$.ajax从其他页面加载了一些HTML：

<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为contentBox的div中：

<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将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

Answer 2

当浏览器运行您的脚本时，没有id = clickableElement的节点，您必须标记该元素也可以在以后创建。

要访问动态DOM节点，您应该使用jQuery中的on()函数。

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

2 个答案: