jquery - 如何在 jquery Mobile 中重新渲染动态生成的 anchor 标记？

Question

我通过 ajax 调用从服务器获取了一个 anchor 标记片段 html。如何“刷新”以便 jquery mobile 可以将必要的类附加到链接？

例如，jquery mobile 生成的链接有一个 ui-link:

<a class="ui-link" href="http://www.google.com">http://www.google.com</a>

如何确保在新生成的 anchor 标记上附加正确的样式？

Answer 1

如果您想刷新已初始化的小部件，则可以使用每种类型的小部件各自的功能来刷新:

$('.ui-btn').button('refresh');

注意，我使用 .ui-btn 类来选择按钮元素，该类在按钮初始化后添加，因此您可以确保刷新已初始化的按钮小部件。

文档:http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-methods.html

如果您需要初始化尚未初始化的小部件，则只需省略 'refresh' 或使用 .trigger('create'):

$('[data-role="button"], button, input[type="button"], input[type="submit"]').not('.ui-btn').button();//or .trigger('create');

请注意，我使用 .not('.ui-btn') 省略了已经初始化的小部件，因此这只会初始化未初始化的小部件。如果您尝试初始化已初始化的小部件，则会收到错误(如果您尝试刷新尚未初始化的小部件，也会出现错误)。

更新

如果服务器正在输出您的 HTML，那么您可以在将小部件添加到 DOM 之前初始化它们:

$.ajax({
    ...
    success : function (serverResponse) {
        var $out = $(serverResponse);
        //if there is a container with elements inside it, use `.find()`,
        //if all the elements are siblings at the top level then use `.filter()`
        $out.find('a').button();
        $('body').append($out);
    }
});

您还可以使用.buttonMarkup()函数来更新按钮小部件:http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-options.html