在-> jQuery加载后获取"CSS & jQuery UI“(ajax)

Question

我有一个页面与jQuery用户界面，工作良好。在这个页面中，我用jquery.load()修改了一些div容器的内容，也很好用。但是如果我加载的内容本身使用css (以显示折叠面板或对话框为例)，我需要在jQuery容器中再次加载jQuery .js文件和css文件。否则它就不能工作了：

我可以做什么，以避免再次加载文件，并有一个工作的ui-对话框，ui-折叠，ui-按钮，...在重新加载的div中？

希望你能理解我想说的:)

Answer 1

jQuery UI依赖于jQuery框架。如果没有jQuery本身，就不能在页面中嵌入jQuery UI。

Answer 2

例如，当你使用jquery ui按钮时，你通过一个特定的调用来初始化它们，如下所示：

$( ".button" ).button({ parameters });

现在，假设您通过ajax load、jquery.load()或任何其他方式加载了页面的一大部分(据我所知，您可以在单击某些按钮后即时手动创建新的DOM节点)。

这里要做的唯一一件事就是将这段代码包装在一个函数中

function initializeButtons(container){
    container = (typeof(container)==="undefined") ? $('body') : container;
    $( '.button', container ).button({ parameters });
}

而且，只要有ajax加载，就可以在回调中调用此函数。如下所示：

$('#mydiv').load("/mypath/mydata.html", function(){
    // content is loaded, now init the buttons
    initializeButtons($('#mydiv'));
});

现在对您使用的jquery ui的所有元素执行相同的操作，日期选择器、折叠按钮、按钮或其他...

请记住，这是一个非常基本的想法，为了获得更大的灵活性，你可以添加其他功能，为了不在同一元素上初始化.button();两次，你也可以为此添加某种测试，以及许多其他事情，但这只是它的基本想法。