JQmodal with on focus not working

Question

I am loading a JQmodal with an ajax call with some basic input elements like a, input, label and button. I need to add a custom class for the elements on focus after immediately opening the modal

Note: Please use tab key to focus each elements

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

What I am getting is weird, focus class is adding for the parent page element but doesn't add to the elements loaded through ajax to the Modal but default focus is working

Fiddle example: Fiddle

Answer 1

When you do:

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

your dynamic content is not loaded in the DOM yet (that's why you have the expected behavior on the main page, but not in the modal content). You must wait for the return of your ajax request to attach event handlers.

I don't know how JQM works, but it must give you a promise or a way to pass some callbacks.

EDIT:

From the JQM documentation, there is an onload callback:

onLoad (callback) Called right after ajax content is loaded.

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

Use it to attach your handlers in the onLoad function and it will do the trick.