jQuery 在未来的 DOM 对象上执行代码？答案

【问题标题】：jQuery execute code on future DOM objects?jQuery 在未来的 DOM 对象上执行代码？
【发布时间】：2011-11-13 07:21:40
【问题描述】：

那么问题来了：

我正在使用 jQuery 来定位 DOM 元素并根据浏览器窗口的高度、父元素等设置它们的高度。下面是一个示例：

$('.multiPanelContainer .panelContainer').each(function() { $(this).css('height', document.body.offsetHeight - $(this).offset().top - 13 + 'px') })

这工作正常，除非 AJAX 调用在页面准备好后引入新的 DOM 元素。我之前使用 live() 将事件处理程序绑定到新的 DOM 元素，但我在这里要做的就是操作新元素的 css。有没有办法在 jQuery 选择器的未来匹配中调用上述代码？我可以将 jQuery 绑定到应用程序后端的 AJAX 回发，只是想知道是否有一个简单的前端解决方案。

这是背景：

整个情况并不理想。我正在使用针对 IE6/IE7 编写的现有 ASP.NET 应用程序，并广泛使用 IE css 'expression()' 语句。我没有做出那个决定，所以不要怪我。无论如何，现在应用程序所有者希望能够在 Chrome 中使用该应用程序，它不理解所说的选择器。我的主管推荐的快速而肮脏的解决方案是将语句转换为您在上面看到的我使用的 jQuery 语句，并将这些语句包含在母版页中链接的单个 js 文件中。我认为将设计拆分为 css 和 js 部分不利于可维护性，但我在这里只有这么多的控制权。

【问题讨论】：

标签： jquery asp.net internet-explorer google-chrome css

【解决方案1】：

一旦 DOM 发生变化，您将不得不重新执行代码。您可以通过使用新的类名标记那些已经完成的任务来节省能源，这样您就可以跳过它们。

【讨论】：

【解决方案2】：

我认为您可以像这样使用 live() 处理程序。以为我很久没有这样做了。

$('.multiPanelContainer .panelContainer').live("load", function(e){ 
     // do your CSS change here. 
})

【讨论】：

【解决方案3】：

您可以将自定义事件附加到包含元素（例如 body 标记）并在您需要时触发该事件（ajax 调用或您可能想要的任何其他...）。

顺便说一句，为什么不使用常规函数而不是匿名函数，只在您使用 ajax 创建的新元素上调用它？

【讨论】：

【解决方案4】：

$(document).ready(function() {
    do();
    $(document).ajaxComplete(function() {
        do();
    });
});

function do () {
    $('.multiPanelContainer .panelContainer').each(function() {
        $(this).css('height', document.body.offsetHeight - $(this).offset().top - 13 + 'px')
    })
}

每次 Ajax-Request 完成时都会执行

【讨论】：