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

Question

我希望在给定的选择器上（例如'.button'），激活jQueryUI按钮小部件。

如果通过ajax在初始页面加载之后插入任何新的'.button'元素，最好的方法是自动激活小部件。

以前，我使用了livePlugin，并编写了类似以下代码的内容：

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

自从'live'被移动到jQuery核心后，live函数要求事件类型作为第一个参数，因此这种方式不再可行。在jQuery核心中是否有替代方法可以实现这一点？

- th3hamburgler

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

- Nick Craver

---

谢谢，我曾考虑过使用liveQuery插件，但第二种方法似乎更高效！ - th3hamburgler

Answer 2

由于所有jQuery命令都具有统一的结构，因此轻松使用任何对象（包括来自Ajax请求的JSON数据）作为jQuery命令。

示例：

var jc = {
    'selector': '#sample',
    'method': 'dialog',
    'options': {'title': 'I am a sample'}
}

$(jc.selector)[jc.method](jc.options);

等同于

$('#sample').dialog({'title': "我是一个示例"}};

http://jsfiddle.net/wb5Ee/

- Oliver A.

Answer 3

由于我无法使其正常工作，因此我认为liveQuery已经过时，可以考虑使用其他替代方案：

https://github.com/bapplistudio/jquery.build

• 你需要将所有的jquery激活声明到 *$("body").build(function(){ }); * 语句中
• 你需要调用 $("newelement").build(); 来回调所有的初始化函数。

请查看jquery.build网站上的文档，获取更多信息、示例和类似于您情况的实时演示。

http://saf.re/github/jquery.build/examples/simple.html

- Baptiste