在jQuery Mobile选择上调用refresh()时出错

时间:2014-10-08 09:06:54

标签: javascript jquery html jquery-mobile jquery-mobile-select

我无法更新jQuery Mobile选择。根据需要,我想更改内容并更新所选值。

这里是小提琴(下面的代码): http://jsfiddle.net/cjindustries/0cmg8vvt/2/

我在控制台中收到此错误(以及选择不更新): 未捕获错误:在初始化之前无法调用selectmenu上的方法;试图调用方法'刷新'

我在这里看到过类似的事情,但我找到的答案都没有解决我的问题。 我们正在使用jQueryMobile 1.3.1和jQuery 1.9.1。

任何帮助将不胜感激:)

谢谢, 克里斯。

...代码

<div data-role="page" id="p1">
    <div data-role="content">
        <h1>Page 1</h1>
        <select class="pageSelect"></select>
        <a href="#" id="update-select-1" data-role="button">Update Select Menu</a>  
    </div>
</div>

function generateOptions() {

    var numbers = [],
        html = "";

    for (var i=0; i<100; i++) {
        var v = Math.random();
        numbers.push(v);
        html = html + '<option value="' + v + '">' + v + '</option>';
    };

    return {
        html: html,
        value: numbers[5]
    };
};

$(document).on('click', '#update-select-1', function() {
    var options = generateOptions(),
        select = $.mobile.activePage.find('.pageSelect');

    select.html(options.html);
    select.val(options.value);

    // This updates the select but I lose styling
    // select.selectmenu().selectmenu('refresh', true); 

    // This fails
    select.selectmenu('refresh', true);
});

1 个答案:

答案 0 :(得分:1)

不要使用.pageSelect作为选择器,因为jQM将使用此样式创建其他元素。当你这样做 'select = $ .mobile.activePage.find('。pageSelect'); select.html(options.html); select.val(options.value);'

你在两个元素中插入html代码,select和渲染对象,因此你失去了样式。

试试这个: $.mobile.activePage.find('select[class=pageSelect]').html(options.html).select('refresh');

http://jsfiddle.net/cjindustries/0cmg8vvt/

另外,如果您从jQM开始,请考虑转到v1.4。