JQmodal avec mise au point ne fonctionne pas

Question

Je charge un JQmodal avec un appel ajax avec certains éléments d'entrée de base comme a, entrée, étiquette et bouton. Je dois ajouter une classe personnalisée pour les éléments de mise au point après l'ouverture immédiatement modale

Remarque: S'il vous plaît utiliser la touche de tabulation pour se concentrer chaque élément

HTML

<p><a href="html_images.asp">HTML Images</a> is a link to a page on this website.</p> 

<p><a href="http://www.w3.org/">W3C</a> is a link to a website on the World Wide Web.</p> 

<a href="#" class="jqModal">view</a> 
... 
<div class="jqmWindow" id="dialog"> 
</div> 

CSS:

.jqmWindow { 
    display: none; 

    position: fixed; 
    top: 17%; 
    left: 50%; 

    margin-left: -300px; 
    width: 600px; 

    background-color: #EEE; 
    color: #333; 
    border: 1px solid black; 
    padding: 12px; 
} 

.jqmOverlay { background-color: #000; } 

/* Fixed posistioning emulation for IE6 
    Star selector used to hide definition from browsers other than IE6 
    For valid CSS, use a conditional include instead */ 
* html .jqmWindow { 
    position: absolute; 
    top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight)/100) + 'px'); 
} 

*.focused 
{ 
    outline-width: 2px ; 
    outline-color: #282828; 
    outline-style: dotted; 
} 

Java Script

$(document).ready(function() { 
    $('#dialog').jqm({ajax: 'https://raw.githubusercontent.com/jothikannan89/jqModal/ed84cf99ebe061e749e9774e64387ba7f/examples/ajax_tab.html'}); 
}); 

    $("a,input,button,select,textarea,.jqmClose").on('focus', 
      function(event) { 
       event.preventDefault(); 
       $(this).addClass('focused'); 
    }); 
    $("a,input,button,select,textarea,.jqmClose").on('blur', 
      function(event) { 
       event.preventDefault() ; 
       $(this).removeClass('focused');  
    }); 

Ce que je veux est bizarre, la classe de mise au point est l'ajout de l'élément de page parent, mais ne pas ajouter aux éléments chargés par ajax à la Modal, mais focus par défaut fonctionne

exemple Fiddle: Fiddle

Answer 1

Quand vous faites:

$("a,input,button,select,textarea,.jqmClose").on('focus', 
     function(event) { 
      event.preventDefault(); 
      $(this).addClass('focused'); 
    }); 

votre contenu dynamique n'est pas chargé dans les DOM encore (ce qui est la raison pour laquelle vous avez le comportement attendu sur la page principale, mais pas dans le contenu modal). Vous devez attendre le retour de votre requête ajax pour attacher des gestionnaires d'événements.

Je ne sais pas comment JQM fonctionne, mais il doit vous donner une promesse ou un moyen de passer quelques rappels.

EDIT:

De la documentation JQM, il y a un rappel onload:

onLoad (rappel) Appelée juste après le contenu ajax est chargé.

// onLoad : assign Mike Alsup's most excellent ajaxForm plugin to the returned form element(s). 
var myLoad = function(hash){ $('form',hash.w).ajaxForm(); }; 
$('#dialog').jqm({onLoad:myLoad}); 

Utilisez-le pour attacher vos gestionnaires dans la fonction onLoad et il fera l'affaire.