javascript - JS wai-aria 和使用 jQuery 加载的动态内容

Question

我正在编写一个使用 twitter bootstrap 和 aria 的 Web 应用程序。我有带有排序选项的表格，看起来: 。我的内容通过 jQuery.html() 函数动态加载到 #content div 中。当我点击 F5 时，一切正常，但是当我通过 jQuery 将内容加载到包含这些表的 div 后，出现了问题。表格失去了搜索选项和分页栏..像这样: 。

有一些功能也停止工作。我应该如何将动态内容加载到我的 #content div 中？

我当前的代码:

this.getContent = function(page){
    var self = this;
    $('#center-column').removeAttr("class");
    if (page.indexOf('&') > 0)
        $('#center-column').addClass( page.substr(0, page.indexOf('&') ) );
    else $('#center-column').addClass( page );

    $.get( $('body').attr('id')+".php?page="+page+"&mode=ajax",
        function(data){
            self.fetchData( data );
        }, "json");
}

this.fetchData = function(data){
    if (data.redirect_url != null)
        window.location = data.redirect_url;
    $("#content").html( data.html );
}

是否有任何方法 aria 有并且我应该在动态更改 div 内容后调用？

Answer 1

after I load content by jQuery to my div which contains these tables, something goes wrong. Tables loses their search options and pagination bars

使用.wrap在现有标记周围添加动态内容:

$("#content").html(  $(data.html).wrap("#content")  )

Is there any method aria has and I should call after I change content of my div dynamicly?

使用 aria-live 属性指示内容是动态的，并使用 assertive 作为值。

$("#content").attr("aria-live", "assertive")

引用文献

• JSON-ARIA
• Using ARIA role=alert or Live Regions to Identify Errors
• Choosing Between Special Case Live Regions
• aria-live (property)
• ARIA Practices: Managing Dynamic Changes