With jquery Watermark, how do I assign it do a yet-to-be-created div?

Question

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/

witch one of the 124332 plugins for watermark are you using? It's always good to point out the link to the plugin you are using, makes things easier for the ones who try to help. — balexandre, Apr 26 '12 at 18:03
Why don't you just run the javascript to wireup the watermark when you load the div? — Jace Rhea, Apr 26 '12 at 18:04
@MilkyWayJoe I mean, it is being created on the programtically, not when the DOM is loaded initially. Thanks — Hairgami_Master, Apr 26 '12 at 18:10
@balexandre Sorry, I didn't realize there were that many jquery watermark plug-ins. This one's called jquery-watermark. http://code.google.com/p/jquery-watermark/ — Hairgami_Master, Apr 26 '12 at 18:11
@Hairgami_Master that's a `input` plugin, why do you mention `
`'s? — balexandre, Apr 26 '12 at 18:13
@balexandre Because I don't know the difference- I just call every thing a div (as a generic term for node I guess). — Hairgami_Master, Apr 27 '12 at 13:10
if you doing what you're doing, you should at least know the difference between a `
` and an `` no? — balexandre, Apr 27 '12 at 14:13

David Thomas · Accepted Answer · 2012-04-26T18:11:04.300

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:

edited Apr 26 '12 at 18:11

answered Apr 26 '12 at 18:04

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

score 2 · Answer 2 · answered Apr 26 '12 at 18:23

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

});

answered Apr 26 '12 at 18:23

balexandre

73,608
45
233
342

Thanks- very clever. I'm going to have to try that. – Hairgami_Master Apr 26 '12 at 21:49

KBN · Answer 3 · 2012-04-26T18:15:54.767

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 :)

edited Apr 26 '12 at 18:15

answered Apr 26 '12 at 18:04

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

score 0 · Answer 4 · edited May 23 '17 at 12:03

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...

edited May 23 '17 at 12:03

Community

1
1

answered Apr 26 '12 at 21:53

Hairgami_Master

5,429
10
45
66

With jquery Watermark, how do I assign it do a yet-to-be-created div?

4 Answers4