应用的jQuery UI部件阿贾克斯加载元素 [英] Apply jQuery UI widgets to ajax loaded elements

问题描述

我要激活jQueryUI的按钮组件在给定的选择，让我们说'.button。

I want to activate the jQueryUI button widget on a given selector, lets say '.button'.

最新最好的方式来自动激活后，通过ajax在页面加载插入到DOM任何新的.button元素的部件。

Whats the best way to automatically activate the widget on any new '.button' elements inserted to the DOM after the initial page load via ajax.

previously，我使​​用code像这样的livePlugin：

Previously, I used the livePlugin with code something like this:

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

由于'活'已经移动到了jQuery核心活函数需要一个事件类型作为第一个参数，所以这是不再可能。有jQuery的核心内的另一种方法，将实现这一目标？

Since 'live' has been moved to the jQuery core the live function requires an event type as the first parameter so this is no longer possible. Is there alternative method within the jQuery core that will achieve this?

推荐答案

您这里有几个选项。首先，有在的liveQuery插件，像这样的：

You have a few options here. First, there's the liveQuery plugin, like this:

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

另一种方法是调用元素上的选择，当你加载它们，这对于例如查找所有 .button 仅的响应，所以不会乱用AJAX调用之前存在的元素：

Another alternative is to call the selector on your elements when you load them, this for example finds all .button only in the response, so doesn't mess with existing elements before the ajax call:

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

如果你有很多事情是让你的插件在这样的功能，另一种类似的方法：

Another similar approach if you have a lot going on is to have your plugins in a function like this:

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);

这篇关于应用的jQuery UI部件阿贾克斯加载元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！