在jquery .load()之后保留jquery-ui元素类

Question

我有一个页面,我正在使用jQuery UI选项卡,我正在做的是通过Ajax加载每个选项卡的内容,但我遇到的问题是,在我的选项卡的内容中,按钮(我'使用jQuery ui按钮)丢失所有的jquery ui类,意思是:

当页面第一次加载时,我的按钮看起来像这样:

<button class="my_button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
<span class="ui-button-icon-primary ui-icon ui-icon-plusthick"></span>
</button>

如您所见,我的按钮具有所有jquery-ui类ui-button, ui-widget, etc....此外,我的按钮有一个跨度,显示加号(+)作为我的按钮的标签.因此,我的按钮显示正确.

但是当我通过Ajax加载相同的内容(包含相同的按钮)时,我的按钮变为如下:

<button class="my_button"></button>

如您所见,我丢失了按钮的所有jQuery ui类.因此,按钮没有样式

我怎样才能解决这个问题？

注意:请注意,我没有手动将这些jquery-ui类添加到我的HTML中的按钮.当您使用$(".my_button").button();jQuery 初始化按钮时,jQuery会自动将所有必需的jquery-ui类适当地应用于我的按钮.所以请不要告诉我这是因为我没有事先将jquery-ui类分配给我的按钮(我不应该).另外,我试过.live() ,.delegate() ,这些都不工作.

请帮助我这个人

谢谢

Answer 1

我曾经遇到过这个问题，并使用 document.ready 调用解决了这个问题，例如

function myreadyFunc(){
    $(".my_button").button();
    // Other codes
}

我已经准备好了文档，如下所示

$(document).ready(function(){
    myreadyFunc();
});

每次 ajax （成功）调用后我都会调用

myreadyFunc();

希望这也会对您有所帮助。我使用这种方法来执行 document.ready 的代码，这是通过在每次 ajax 调用后调用 document.ready 不可能实现的。