0

我正在使用 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);
    });

});
4

1 回答 1

1

这是一个疯狂的猜测，但你需要改变你的逻辑。从你刚才说的我猜你有几个具有相同.content-padddiv 的页面。如果是这种情况，那么您需要了解 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);
    });

});

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

于 2013-05-31T12:54:55.030 回答