Question

我有以下功能将水印文字应用于ID为"Search"的页面上的任何文本框：

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

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

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

我能做些什么来确保任何异步加载的文本框都应用了这个功能吗？感谢。

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

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

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

2 个答案: