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

Posted 2023-05-08

【中文标题】将 jQuery UI 小部件应用于 ajax 加载的元素

【英文标题】：Apply jQuery UI widgets to ajax loaded elements

【发布时间】：2011-02-03 08:00:20

【问题描述】：

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

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

以前，我使用 livePlugin 的代码如下：

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

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

【参考方案1】：

这里有几个选项。首先是liveQuery plugin，像这样：

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

另一种选择是在加载元素时调用元素上的选择器，例如在响应中找到所有.button only，因此在 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);

【讨论】：

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

【参考方案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/

【参考方案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