le code jQuery fonctionne pour la console, mais pas dans la page

Question

J'ai un élément de forme définie comme:

<div class="field"> 
    <div class="name"> 
     <label for="User_LastName"> 
      Last name: <span class="asterisk">*</span></label> 
    </div> 
    <div class="value"> 
     <%= Html.TextBox("User.LastName", Model.LastName)%> 
     <%= Html.ValidationMessage("User.LastName")%> 
    </div> 
</div> 

et un sélecteur jQuery qui est censé détecter quand l'entrée se concentrer et mettre en évidence le parent:

$("input").focus(function() { 
    //watching for an event where an input form comes into focus 
     $(this).parent().addClass("curFocus").children("div").toggle(); 
    }); 

Si je colle ce code dans la console de firebug - les choses fonctionnent comme prévu. Cependant, je cours cela à partir d'une page 'RenderPartial' .net mvc. Autre code jQuery assis dans le même $ (document) .ready (function() {fonctionne correctement

Le formulaire utilise des aides html pour générer les entrées qui pourraient compliquer un peu le processus - mais même si ... i ' m voir le comportement correct lorsque ce code de la console, mais pas dans une page « en temps réel ».

Comment puis-je résoudre ce?

Answer 1

lorsque vous rendre une partie, le sélecteur $("input") ne trouve pas la Si vous le modifiez en un événement en direct, il fonctionnera sur les éléments ajoutés après l'exécution de document.ready

Pour résoudre ce problème, utilisez .live() comme ceci:

$("input").live('focus', function() { 
    $(this).parent().addClass("curFocus").children("div").toggle(); 
}); 

Note: nécessite jQuery 1.4.1+

Answer 2

Utilisez setTimeOut

setOut(function(){ 
     $("input").focus(function() { 
      //watching for an event where an input form comes into focus 
      $(this).parent().addClass("curFocus").children("div").toggle(); 
     }); 
    },500)