2011-09-08 21 views
0

因此,这里的问题:jQuery在未来的DOM对象上执行代码?

我使用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作品会对可维护性造成影响,但我只能在这里控制这么多。

回答

0

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

0

我想你可以使用像这样的live()处理函数。以为我很久没有这样做了。

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

你可以自定义事件附加到包含元素(例如body标签),并触发时,你想要它是事件(Ajax调用或其他任何东西,你可能想...)。

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

0
$(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请求已经完成

时间