jQuery:用于初始化插件的实时函数

Question

我制作了一些小部件插件，这些插件正在应用于例如文本框像 $（"input.txtbox"）.myTextbox（）;

现在我正在使用 Ajax 动态加载内容，我想知道：有没有办法使用 jQuery 的 live 函数将该插件自动应用于将通过 Ajax 加载的每个文本框？

谢谢

Answer 1

不能使用 .live()，但可以设置全局ajaxSuccess或ajaxComplete处理程序。

$.ajaxSuccess(function ()
{
    $('input.txtbox').myTextbox();
});

您可能希望通过不重新初始化已经初始化的输入上的插件来提高效率;类似于

$.ajaxSuccess(function ()
{
    $('input.txtbox:not(.myTextbox)').myTextbox().addClass('myTextbox');
});

Answer 2

修改 DOM 结构时实际上会触发事件。每当创建一个新文本框并将其插入到文档中时，您都可以做出反应以绑定插件初始化代码。有问题的事件是 DOMNodeInserted（节点已将子节点添加到另一个元素）和 DOMNodeInsertedIntoDocument（节点最初插入到文档中）。

请注意，不保证这些事件的可用性/并非所有浏览器都支持事件。因此，您需要使用目标浏览器/实现进行检查，并可能使用 Matt 的方法使其跨浏览器工作。

假设您的目标浏览器支持这些事件，您将执行类似于以下操作的操作：

$(document).live('DOMNodeInserted', function(e){
    // Get inserted node from event and initialize your plugin if the element is initially seen
});