Impossibile impostare lo stato attivo su un campo modulo in una finestra di dialogo dell'interfaccia utente jQuery facendo clic su una voce di menu jQueryUI

Question

Ho una finestra di dialogo dell'interfaccia utente jQuery contenente un modulo a campo unico e la proprietà autoOpen è impostata su false all'inizio. C'è un altro menu dell'interfaccia utente di jQuery nella pagina e la funzione di apertura della finestra di dialogo è vincolante per l'evento click delle voci di menu. Ho cercato di mettere a fuoco l'unico campo modulo della finestra di dialogo quando la finestra di dialogo è aperta al clic delle voci del menu in qualche modo senza fortuna. Per individuare la causa ho anche aggiunto un altro pulsante di test e facendo clic su quel pulsante posso impostare lo stato attivo sul campo modulo. Quindi sono abbastanza sicuro che sia il menu dell'interfaccia utente jQuery che impedisce il focus del campo. Mi chiedo se c'è un modo per aggirare questo vincolo. Qualsiasi intuizione è apprezzata. Grazie!

html:

<ul id="menu"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
</ul> 
</br> 
<button id="btn">Open the dialog</button> 

<div id="dialog" title="Basic dialog"> 
    <form> 
     <input type="text" id="fld" /> 
    </form> 
</div> 

javascript:

$("#dialog").dialog({ 
    autoOpen: false, 
    open: function(event, ui){ 
     $('#fld').focus(); 
    } 
}); 

$('#btn').click(function(e){ 
    $("#dialog").dialog('open'); 
}); 

$('#menu li a').click(function(){ 
    $("#dialog").dialog('open'); 
}) 

$("#menu").menu({ 
    select: function(event, ui) { 
     $("#dialog").dialog('open'); 
    } 
}); 

Ecco la js fiddle

Answer 1

Interessante.

Il menu di jQuery influisce sull'accensione in qualche modo. Stavo osservando il tuo violino e ho scoperto che anche se si ritarda la messa a fuoco 1 millisecondo funziona.

Dai un'occhiata a questo.

$("#dialog").dialog({ 
    autoOpen: false, 
    open: function(event, ui){ 
     setTimeout(function(){$('#fld').focus();},1); 
    } 
}); 

$('#btn').click(function(e){ 
    $("#dialog").dialog('open'); 
}); 

$('#menu li a').click(function(){ 
    $("#dialog").dialog('open'); 
}) 

$("#menu").menu(); 

http://jsfiddle.net/XMEWu/1/

Answer 2

all'uso su Dialog pagina

$(window).load(function() { 
    //Use Focus as $("#stsr").focus(); 
} 

Answer 3

Questo mi ha spinto pazzo. Ecco cosa lo ha risolto per me (versione più generica della risposta di @ Trevor).

$('#element').dialog({ 
    open: function() {       
    //focus fix 
    $('textarea, input', $(this)).click(function() { 
     var $inp = $(this); 
     setTimeout(function() { 
      $inp.focus(); 
     }, 1); 
    });       
    } 
});