如何将$(document).ready函数应用于异步加载的元素？

Question

我有以下函数，可以将水印文本应用于页面上ID为"Search"的任何文本框：

jQuery(document).ready(function ($) {

    $("#Search").watermark({
        watermarkClass: 'watermarkOn',
        defaultText: $("#Search").attr("watermarkText")
    });
});

我遇到的问题是，当我异步加载包含文本框的面板时，这个函数不会被应用，因为它发生在jQuery(document).ready函数中，而该函数已经被触发。

有什么办法可以确保任何异步加载的文本框都应用了这个函数吗？谢谢。

- DaveDev

---

元素是如何加载的？此外，您是否有多个具有id="Search"的元素？ - Nick Craver

Answer 1

如果您正在使用$(selector).load()，那么请在回调函数中调用.watermark()。

$('someSelector').load('/some/path', function( response ) {
    $('someNewElement').find('input').watermark({
        watermarkClass: 'watermarkOn',
        defaultText: $("#Search").attr("watermarkText")
    });
});

如果选项都是一样的，你可以将它们存储到一个变量中以便重复使用。

var options = {
           watermarkClass: 'watermarkOn',
           defaultText: $("#Search").attr("watermarkText")
          };

$("#Search").watermark( options );

$('someSelector').load('/some/path', function( response ) {
    $('someNewElement').find('input').watermark( options );
});

- user113716

---

在异步加载内容后，找到一种调用它的方式。即使不是load()，但你所做的任何操作都有一种在脚本成功完成时执行代码的方法。 - Thomas Clayson

Answer 2

查找.live()方法以绑定事件，对于之前或未来创建的元素，就像您的情况一样，异步地进行。

参考：http://api.jquery.com/live/

可能可以修改您使用的watermark插件/方法，以使用.live()

.live()仅适用于事件，并且不允许您将插件附加到将来创建的元素。

为此，您可以查看liveQuery插件，该插件将允许您将插件附加到可能在未来创建的元素。

例如：

//initiate the watermark plugin on all elements with class 'search' existing now or created in the future.
    $('.Search').livequery(function() {
        $(this).watermark({
            watermarkClass: 'watermarkOn',
            defaultText: $("#Search").attr("watermarkText")
        });
    });

- Moin Zaman

---

即使您编辑了内容，事情也不是这样运作的......我并不是要说话很粗鲁，但是“没有”答案比错误的答案要好，而您在过去几天中发布了许多此类答案。 - Nick Craver

@Nick - 没关系，朋友。我因为发表“错误”的答案而学到了更多知识。你能指出你认为有“很多”错误的地方吗？ - Moin Zaman

我知道.live()不能与插件一起使用，因为它是基于事件的。插件可能会使用这些事件，从而能够利用.live()。 - Moin Zaman

你不能简单地使用.live()来完成这个任务...当一个新元素被添加时，需要对它进行一些操作，比如添加水印类和可能的focus/blur行为....live()无法做到这一点，它不知道已添加的元素，因此它没有机制来识别添加到DOM中的元素并向它们添加类/属性。这对于大多数插件都是正确的，否则它就不会是一个插件，而是一个简单的.live()处理程序。 - Nick Craver