在AJAX加载后重新绑定jQuery样式的UI接口的首选模式是什么？

Question

这总是让我感动.在网页上初始化所有可爱的UI元素之后,我加载了一些内容(例如,加载到模式或标签中),并且新加载的内容没有初始化UI元素.例如:

$('a.button').button(); // jquery ui button as an example
$('select').chosen(); // chosen ui as another example
$('#content').load('/uri'); // content is not styled :(

我目前的方法是创建一个需要绑定的元素的注册表:

var uiRegistry = {
  registry: [],
  push: function (func) { this.registry.push(func) },
  apply: function (scope) {
    $.each(uiRegistry.registry, function (i, func) {
      func(scope);
    });
  }
};

uiRegistry.push(function (scope) {
  $('a.button', scope).button();
  $('select', scope).chosen();
});

uiRegistry.apply('body'); // content gets styled as per usual

$('#content').load('/uri', function () {
  uiRegistry.apply($(this)); // content gets styled :)
});

我不能成为唯一有这个问题的人,那么有没有更好的模式呢？

Answer 1

最好的方法是将所有 ui 代码包装在一个函数中 - 更好的是一个单独的文件 - 并且在 ajax 加载时只需指定该函数作为回调..这是一个小例子

假设您有将带有类的文本字段绑定someclass-for-date到日期选择器的代码，那么您的代码将如下所示..

$('.someclass-for-date').datepicker();

这是我认为最好的

function datepickerUi(){
    $('.someclass-for-date').datepicker();
}

这是负载的样子

$('#content').load('/uri', function(){

    datepickerUi();

})

或者你可以在脚本标签中的html末尾加载它..（但我不喜欢那样，因为它更难调试）

这是一些提示

保持你的代码和CSS样式尽可能干净..这意味着对于应该是日期选择器的文本字段，在你的网站上给它们一个类..按照这个速度，你的所有代码都将是干净且易于维护的..

阅读有关 OOCss 的更多内容，这将清楚我的意思。

大多数情况下，jquery 都与组织有关...稍微思考一下，您将通过一行代码得到您想要的结果..

编辑

这是一个 js 小提琴，与你的类似，但我想它更干净一点，请点击这里