Question

I have the following function which applies watermark text to any text box on the page with the id "Search":

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

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

The problem I’m having is that that this doesn’t get applied when I asynchronously load a panel that contains the text box, because it occurs in the jQuery(document).ready function, which has already fired.

Is there anything I can do to make sure that any asynchronously loaded text boxes have this function applied to them? Thanks.

Answer 1

If you’re using $(selector).load(), then call the .watermark() in the callback.

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

If the options are all the same, you could store them in a variable to be reused.

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

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

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