JQmodal с фокусом не работает

Question

Я загружаю JQmodal с помощью вызова ajax с некоторыми базовыми элементами ввода, такими как a, input, label и button. Мне нужно добавить собственный класс для элементов в фокусе после немедленного открытия модального

Примечание: пожалуйста, используйте клавишу Tab, чтобы сфокусировать каждый элемент

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

То, что я получаю, странно, класс фокуса добавляет для родительского элемента страницы, но не добавляет к элементам, загруженным через ajax в модал, но фокус по умолчанию работает

Пример скрипки: скрипка

Answer 1

Когда вы делаете:

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

ваш динамический контент еще не загружен в DOM (именно поэтому у вас ожидаемое поведение на главной странице, но не в модальном контенте). Вы должны дождаться возврата вашего ajax-запроса для присоединения обработчиков событий.

Я не знаю, как работает JQM, но он должен дать вам обещание или способ передать некоторые обратные вызовы.

РЕДАКТИРОВАТЬ:

Из документации JQM есть обратный вызов onload:

onLoad (callback) Вызывается сразу после загрузки содержимого ajax.

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

Используйте его, чтобы присоединить ваши обработчики к функции onLoad, и это поможет.