Comment appliquer une fonction $ (document) .ready à des éléments chargés de manière asynchrone?

Question

je la fonction suivante qui applique le texte de filigrane à une zone de texte sur la page avec l'id "Search":

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

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

Le problème que je vais avoir est que que cela ne soit pas appliquée lorsque je charge de façon asynchrone une panneau qui contient la zone de texte, car il se produit dans la fonction jQuery(document).ready, qui a déjà été déclenchée.

Y a-t-il quelque chose que je peux faire pour m'assurer que les boîtes de texte chargées de manière asynchrone ont cette fonction qui leur est appliquée? Merci.

Answer 1

Si vous utilisez $(selector).load(), puis appelez la .watermark() dans le rappel.

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

Si les options sont toutes les mêmes, vous pouvez les stocker dans une variable à réutiliser.

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

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

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

Answer 2

recherche la méthode .live() pour lier des événements, à des éléments créés précédemment, ou dans le futur, comme dans votre cas, de manière asynchrone.

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

Il est possible de modifier le plug-in watermark/méthode que vous devez utiliser .live()

.live() ne fonctionnera que pour des événements et il ne vous permettra pas d'attacher un plugin aux éléments cela sera créé dans le futur.

Pour cela, vous pouvez regarder liveQuery un plugin qui vous permettra de joindre des plugins à des éléments qui pourraient être créés dans le futur.

par ex.

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