将jQuery UI小部件应用于Ajax加载的元素

Question

我想在给定的选择器上激活jQueryUI按钮小部件，让我们说“ .button”。

通过ajax加载初始页面后，在插入DOM的任何新“ .button”元素上自动激活窗口小部件的最佳方法是什么？

以前，我将livePlugin与以下代码一起使用：

$('.button')
    .live(function(){
        $(this).button();
    })

由于“实时”已移至jQuery核心，因此实时函数需要将事件类型作为第一个参数，因此不再可行。jQuery核心中是否有替代方法可以实现这一目标？

Answer 1

您在这里有一些选择。首先，有一个liveQuery插件，如下所示：

$(.button).liveQuery(function() { $(this).button(); });

另一种选择是在加载元素时调用选择器，例如，这.button 仅 在响应中找到所有选择器，因此在ajax调用之前不会与现有元素混淆：

$.ajax({
   url: 'page.html'
   success: function(data) {
     //stuff...
     $('.button', data).button();
   }
});

如果您有很多事情要做，另一种类似的方法是让您的插件具有以下功能：

function rigUI(context) {
  $('.button', context).button();
  $('.date', context).datepicker();
}

$(rigUI); // Load at document.ready, default context is document

//in ajax load love above call: rigUI(data);