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

【问题标题】：How do I access elements via the DOM retrieved from $.ajax()?如何通过从 $.ajax() 检索到的 DOM 访问元素？
【发布时间】：2012-03-09 19:25:13
【问题描述】：

我通过$.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。我该如何解决这个问题？

【问题讨论】：

你还有困难吗？
非常感谢，javascript 现在可以使用.on()。然而，CSS 选择器不是。
我刚刚问了一个新的相关问题：goo.gl/OXtWG

标签： jquery ajax events dom

【解决方案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!' );
});

ondocs:

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。 jQuery 将事件从事件目标冒泡到附加处理程序的元素（即从最内到最外的元素），并为匹配选择器的路径上的任何元素运行处理程序。

【讨论】：

感谢您的帮助。如何在未命名函数中访问 ID 为 #clickableElement 的元素？我现在不能使用$(this)，因为$(this)指的是ID为#contentBox的元素，对吧？
@DavidFaux。 this 将是 clickableElement 参见this DEMO

【解决方案2】：

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

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

【讨论】：

谢谢，什么是动态 DOM 节点？
@David Faux：动态 DOM 节点 - 未在 html 文件中定义但在站点加载和呈现后创建的节点。
这不是“标记”该元素可以稍后创建。这是一个委托事件。