Scripts de boîte de dialogue jQuery pour l'entrée val

Question

J'ai un petit problème avec une boîte de dialogue jQuery et la manière dont les scripts sont traités.

Dans la boîte de dialogue html, je

<input id="test"> 

Si je

<script type="text/javascript> 
    $('#test').val("haha") 
</script> 

après l'entrée, il apparaît. Si je le mets avant, cela ne fonctionne pas. Maintenant, le problème est que j'essaie de changer la valeur de $ ('# test') en utilisant un déclencheur de clic, et je ne peux pas! L'alerte fonctionne et le remplacement initial de val fonctionne, ce qui signifie qu'il n'y a pas de zones d'entrée en double ou manquantes.

Le script tout comme il est maintenant, ne fonctionne pas:

<input type="button" class="testbutton" /> 
<input type="text" size="10" id="test" name="test" value=""> 

$('#test').val("currentvalue"); // This works 
     $('.testbutton').click(function() { 
       alert();  
       $('#test').val("haha"); 
     }); 

Mise à jour La boîte de dialogue affiche la valeur correcte dans #test une fois la boîte de dialogue est fermé puis rouvert. Serait-ce quelque chose qui me manque?

Answer 1

Le problème a fini par être le # dans le test. Pour une raison quelconque, le remplacement fonctionne avec un identifiant de classe au lieu d'un identifiant id. Je suppose que c'est parce que le # ne remplacera qu'une seule instance, et pour une raison que je n'ai pas encore découverte, il y a plus d'une instance du dialogue (ou une instance cachée).

Merci pour toutes vos suggestions!

Answer 2

Mettez votre code jQuery dans $(document).ready(function() {...your code...}). Cela le fera exécuter après le navigateur crée l'arborescence DOM pour votre page. Sinon, javascript n'est pas capable de rechercher/manipuler les éléments DOM correctement. Il se présentera comme suit:

$(document).ready(function() { 
    $('.testbutton').click(function() { 
      $('#test').val("haha"); 
    }); 
}); 

Mise à jour:

Si votre code HTML est chargé dynamiquement, puis utilisez live pour lier gestionnaire d'événements:

$(document).ready(function() { 
    $('.testbutton').live("click", function() { 
      $('#test').val("haha"); 
    }); 
}); 

Answer 3

Je suppose que vous devriez envelopper votre code à l'intérieur d'un $ (function() {// code ici}); pour vous assurer que votre code est exécuté uniquement lorsque votre DOM est prêt.