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

fiddle 示例:Fiddle

Answer 1

当你这样做时:

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

您的动态内容尚未加载到 DOM 中(这就是为什么您在主页上具有预期的行为，但在模态内容中却没有)。您必须等待 ajax 请求返回才能附加事件处理程序。

我不知道 JQM 是如何工作的，但它必须给你一个 promise 或一种传递一些回调的方法。

编辑:

从 JQM 文档中，有一个 onload 回调:

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

使用它在 onLoad 函数中附加你的处理程序，它就能达到目的。