Question

所以这就是问题：

我正在使用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片段对于可维护性来说是不好的，但我在这里只有很多控制权。

Answer 1

DOM更改后，您必须重新执行代码。您可以通过标记已使用新类名完成的操作来节省能源，以便跳过它们。

Answer 2

我认为你可以像这样使用live（）处理程序。以为我很久没有这样做了。

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

Answer 3

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

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

Answer 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时都会执行

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

4 个答案: