JQmodal焦点不工作

Question

我正在加载一个带有 ajax 调用的 JQmodal，其中包含一些基本输入元素，如 a、输入、标签和按钮。立即打开模式后，我需要为焦点元素添加一个自定义类

注意：请使用 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 脚本

$(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 加载到 Modal 的元素，但默认焦点正在工作

小提琴示例：Fiddle

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 函数中附加您的处理程序，它就可以解决问题。