jQuery Mobile PageShow 没有按预期工作

Question

我正在使用 jQuery Mobile 的 PageShow 事件来设置某些输入元素的宽度。如果我直接加载页面（即通过 URL），一切都会按预期工作。

如果我通过标准 ajax 导航系统（即应用内链接）加载页面，我会收到“hello”警报和正确的“span.add-on”宽度，但“div.content” -padd' 元素的宽度为零？ 'div.content-padd' 是页面中所有其他元素的容器元素，并为它们提供一些填充等。所有 JS 都加载到我的 Rails 布局模板中。

我不知道这里发生了什么。我的代码如下：

$(document).bind('pageshow', function() {

alert('hello')

    $('.add-on').addClass('ui-corner-all');

    //Set the width of the input following the appends or prepends to the remaining space
    var containerWidth = $('div.content-padd').width();
    console.log('container width:' + containerWidth);

    var appendsAndPrepends = '.input-prepend, .input-append';
    $(appendsAndPrepends).each(function () {
        var remainingSpace = containerWidth - $(this).find('span.add-on').outerWidth();
        console.log('span width' + $(this).find('span.add-on').outerWidth());

        $(this).find('div.ui-input-text').outerWidth(remainingSpace);
    });

});

Answer 1

这是一个疯狂的猜测，但你需要改变你的逻辑。根据您刚才所说，我猜您有几个页面具有相同的 .content-padd div。如果是这种情况，那么您需要了解 jQuery Mobile 和 javascript 的工作原理。 jQuery Mobile 使用 ajax 将内容加载到 DOM 中。可以加载一页或多页。

如果您有多个具有相同 DIV id 的页面，当您尝试访问它时，您将访问在 DOM 中找到的第一个具有该 ID 的元素，而它通常不是您想要的 DIV。

要访问正确的 DIV，您需要使用称为活动页面的 jQuery Mobile 选择器：

$.mobile.activePage

如果不测试你的代码应该是这样的：

$(document).bind('pageshow', function() {

    alert('hello')

    $.mobile.activePage.find('.add-on').addClass('ui-corner-all');

    //Set the width of the input following the appends or prepends to the remaining space
    var containerWidth = $.mobile.activePage.find('div.content-padd').width();
    console.log('container width:' + containerWidth);

    var appendsAndPrepends = '.input-prepend, .input-append';
    $.mobile.activePage.find(appendsAndPrepends).each(function () {
        var remainingSpace = containerWidth - $(this).find('span.add-on').outerWidth();
        console.log('span width' + $(this).find('span.add-on').outerWidth());

        $(this).find('div.ui-input-text').outerWidth(remainingSpace);
    });

});

我不确定这段代码是否正常工作，但我认为您现在应该明白这一点。