0

In this sample, the watermark plug-in doesn't work at first, because the div "tbFirstName" is not loaded yet.

$(document).ready(function () {
         $('#tbFirstName').watermark('Required information');
});

The (.live) Jquery tool or (.on) tool seem to work based on a event such as "click" or "blur". Do you know how I can get this watermark effect on a div that loads in the future, and without having to assign to a user-event?

Many thanks!

Ref: http://code.google.com/p/jquery-watermark/

Hairgami_Master
  • 5,429
  • 10
  • 45
  • 66

4 Answers4

3

You could try the DOMNodeInserted event:

$(document).on('DOMNodeInserted','#tbFirstName',function(){
    $('#tbFirstName').watermark('Required information');
});

JS Fiddle proof-of-concept.

Note that it's important to attach the on() method to whatever element is closest the closest parent to the to-be-attached $('#tbFirstName') element, otherwise it will run every time something's appended to the DOM.

It's also worth noting, just for completion, that it'd be far easier, and more efficient, to bind the watermark() while creating or appending that element to the DOM.

References:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Couldn't this get VERY process intensive, since it would attempt this on every element insertion to the DOM? – Stefan H Apr 26 '12 at 18:10
  • Well, obviously attach the event to the nearest possible parent element that's already present in the DOM when the `on()` is assigned. Besides that, I'm not sure how else he could more efficiently accomplish his aim, unless he binds the event in whatever function creates/appends/loads the element. But I sort of assume that something so obvious has been tried and found wanting (for some reason). – David Thomas Apr 26 '12 at 18:12
  • I think doing the binding just before the element is created might be the best call. But then again, if the OP can do that, why couldn't they just do the binding after the element is created in the first place. – Stefan H Apr 26 '12 at 18:14
  • Thanks @DavidThomas- This did help me realize something. The element is being created by code in a ASP .net project. For some reason, JQuery is not picking up on the element being created... I have another problem to sort through first. – Hairgami_Master Apr 26 '12 at 18:22
2

You can always call .watermark() on the new inputs creation

like this example in JsBin

$(function() {

  $(".watermark").watermark("Write something...");

  $(".btn-add").click(function() {
    $(".list").append('<li><input type="text" class="watermark" /></li>');
    $(".watermark").watermark("Write something...");
  });

});
balexandre
  • 73,608
  • 45
  • 233
  • 342
0

Try changing your code to :

$(document).ready(function () {
         $('#tbFirstName').live("watermark", function(){ 
            $('#tbFirstName').html("required info");
        });
});

Reason, since the element is not present already, the binding does not work. "live" api is used to dynamically bind events to elements.

Ref : http://api.jquery.com/live/

Edit : Stephan pointed out that "live()" wouldn't work, I just read the same on your description to, sorry :)

KBN
  • 2,915
  • 16
  • 27
  • "watermark" is not an event that live can bind to. How would this work? – Stefan H Apr 26 '12 at 18:05
  • The closest thing to your example would be a custom event, but you would then need to trigger that event: http://api.jquery.com/live/#example-3 – Stefan H Apr 26 '12 at 18:09
  • Thanks I just realized the element being created is not being picked up by jquery for some reason. I have another problem to deal with first. – Hairgami_Master Apr 26 '12 at 18:23
0

I discovered my problem was specific to the ASP.NET Update Panel. A post led me to the right answer, which was to use this:

function pageLoad(sender, args) { 
    ... 
}

instead of the $(document).ready function.

Thank you to all who offered there help- much appreciation. Here's the helpful post:

How to have a javascript callback executed after an update panel postback...

Community
  • 1
  • 1
Hairgami_Master
  • 5,429
  • 10
  • 45
  • 66