【问题标题】:Bizarre issue I'm having with my jQuery我的 jQuery 遇到的奇怪问题
【发布时间】:2013-06-03 22:59:29
【问题描述】:

这是我在工作中被分配的一个可访问性错误,其中项目无法使用选项卡在对话框中遍历。

真的很奇怪的问题,希望大家帮忙。

我们从下面的代码开始......它包含在一些对象变量中,例如

(<selector>).dialog(bam.ui.dialogOptions());

在 dialogOptions 中我发表了评论,以便您可以看到我在哪里调用我的函数 .tabAccess;这是我尝试在我的对话框中使用 tabindex 并强制它在对话框中执行我想要的操作。

dialogOptions: function (options) {
        var settings = { title: "", showScrollbar: true };
        if (options) {
            $.extend(settings, options);
        }
        return {
            height: 373,
            width: 648,
            modal: true,
            title: settings.title,
            resizable: false,
            open: function (event, ui) {
                $(this).parent().focus();
                $('html').addClass("hidden-scrollbar");
                $(event.target).html(DialogLoadingdlg);
                $(this).find("input:enabled:last").live("blur", function () { $("a.ui-dialog-titlebar-close").focus(); });
                $("span.ui-icon-closethick").html(closeImage);
/*TAB ACCESS CALLED HERE; 
ASSIGNING IT TO THE PARENT ELEMENT OF THE DIALOG CONTENT, 
THAT BEING THE DIALOG ITSELF*/
                $(this).parent().tabAccess(); 
            },
            close: function (event, ui) {
                $('.operate a').removeClass("selected");
                if (settings.showScrollbar)
                    $('html').removeClass("hidden-scrollbar");
            }
        }
    }

这里是函数tabAccess

(function ($) {
$.fn.tabAccess = function () {
    return this.each(function () {
        $('a:hover, a:focus', 'input:hover', 'input.focus').css('outline', 'thin dashed grey');
        var $tabableElements = Array('A', 'INPUT');
        var $this = $(this);
        var keyName = { "tab": 9 };
        var flag = 0;
        var tabIndex = 1;
        beginIteration($this);

/*The idea behind this function is to traverse through all children of the 
dialog; as well as all their children, applying the tabindex attribute to
only the elements contained in $tabableElements defined above and skipping
the other elements*/

        function beginIteration(item) {
            item.children().each(function(index) {
                if ($.inArray($(this).attr('tagName'), $tabableElements) != -1) {
                    $(this).attr('tabindex', tabIndex);
                    tabIndex++;
                } else {
/*The code works when I put an alert in here
but it alerts every element that is not a match
for $tabableElements; so, clearly I can't keep this.

I have tried everything from setTimeout, to console.log,
but when I take this alert out, the code does not insert
tabindex into the elements I want.*/
                    alert($(this).attr('tagName');
                    beginIteration($(this));
                }
            });
        }

        $this.bind({
            keydown: function (e) {
                switch (e.keyCode) {
                    case keyName.tab:
                    {
                        e.preventDefault();

                        if (e.shiftKey) {
                            e.preventDefault();

                        }
                        break;
                    }
                }
            }
        });
    });
};
})(jQuery);

有人帮忙!?

一如既往,提前致谢...如果您需要更多信息,请告诉我。

【问题讨论】:

    标签: jquery jquery-ui recursion accessibility tabindex


    【解决方案1】:

    好的,所以...问题是我在我的问题中没有提到的问题。作为记录,如果有人遇到过这个问题......它可能已经在这里了,但是......

    问题是对对话框的 ajax 调用没有得到足够的时间来完成它的执行。

    放置

    var intervalHandler = setInterval(function() {
                if ($this.find('.loading').length == 0) {
                    beginIteration($this);
    
                    clearInterval(intervalHandler);
                }
            }, 500);
    

    beginIteration 电话解决一切之前。

    【讨论】:

    • 这也称为竞争条件。
    猜你喜欢
    • 2011-08-17
    • 1970-01-01
    • 2013-02-06
    • 2023-03-04
    • 2014-07-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多