Question

我通过Ajax将以下HTML加载到由jQuery Mobile提供支持的网页中。重要的是附加到锚标记的onButton的类名。

<a class="onButton ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-role="button" data-inline="true" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Turn On</span></span></a>

通过Ajax加载后，我触发了一个“创建事件”，以根据文档应用jQuery Mobile按钮样式。

$.ajax({
    url: '/loadAllButtons',
    context: $('contentBox'),
    cache: false,
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])},
    success: function(data) {
        $(this).html(data).trigger( "create" );
    }
});

我看到按钮已成功加载。但是，当我呼叫console.log($('.onButton').length);时，控制台显示0。

这很有趣，因为Chrome Web Developer会记录5个<a>标记实例，其中onButton类通过Ajax加载。

为什么jQuery没有检测到新加载的锚标签（或按钮）？

要清楚，以下是我的调试方式：

$.ajax({
    url: '/loadAllButtons',
    context: $('contentBox'),
    cache: false,
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])},
    success: function(data) {
        $(this).html(data).trigger( "create" );
    }
});
console.log($('.onButton').length);

谢谢。

Answer 1

您需要将调试console.log()放入AJAX调用的回调中。实际上，console.log()在发送请求之后运行（因为默认情况下AJAX请求是异步的），这将在从服务器接收响应之前，因此在将任何元素添加到DOM之前

试试这个：

$.ajax({
    url: '/loadAllButtons',
    context: $('contentBox'),
    cache: false,
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])},
    success: function(data) {
        $(this).html(data).trigger( "create" );
        console.log($('.onButton').length);
    }
});

此外，由于您要向已应用jQuery Mobile类/结构的DOM添加按钮元素，因此您可能需要调用.button('refresh')来刷新元素而不是.trigger('create')来初始化它们。我之前没有使用.button('refresh')所以我不确定你是否可以在按钮的祖先元素上调用它，或者如果你必须在按钮本身上调用它，如：

$(this).html(data).find('.onButton').button( "refresh" );

为什么jQuery没有检测到动态加载的jQuery Mobile按钮？

1 个答案: