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

Question

我想激活给定选择器上的jQueryUI按钮小部件,让我们说'.button'.

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

以前,我使用livePlugin代码如下:

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

由于'live'已被移动到jQuery核心,live函数需要一个事件类型作为第一个参数,因此不再可能.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);