Question

当我尝试动态更改jqm滑块（或者列表视图）的值时，我收到了这个神秘的错误

未定义

在初始化之前无法调用滑块上的方法;

尝试调用方法'refresh'

这是我的代码的简化版本

$("#mypage").bind("pagecreate", function(){
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});

我也尝试用$(window).load和$(document).ready但没有成功，但由于jqm告诉我使用pagecreate事件，我不知道到底出了什么问题。

Answer 1

刷新表单元素

在jQuery Mobile中，一些增强的表单控件只是简单的样式（输入），但其他的是自定义控件（选择，滑块），由本机控件构建并与之保持同步。要以编程方式使用JavaScript更新表单控件，首先操作本机控件，然后使用refresh方法告诉增强控件更新自身以匹配新状态。以下是如何更新常用表单控件，然后调用refresh方法的一些示例：

复选框：

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

收音机：

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

选择

var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

滑块：

$("input[type='range']").val(60).slider("refresh");

翻转开关（他们使用滑块）：

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");

来源：jQuery Mobile Docs (version 1.1.0)

Answer 2

您需要发布实际代码才能得到正确答案。

您可能想尝试将代码的第一行更改为...

$("#mypage").live("pagecreate", function(){

...或

$('#mypage').live('pagebeforecreate',function(event){

我确定你已经看过这个页面，但是如果你还没有看到这个页面底部附近的“页面初始化事件”部分的内容可能有帮助......

Page initialization events

您可能还想尝试此页面上的建议......

Working with jQuery Mobile's Auto-initialization

Answer 3

我遇到了同样的问题。我可以通过关闭自动初始化来实现它。

<input type="range" id="f_range" value="16" min="16" max="99" data-role="none" />

然后你只需要按如下方式手动初始化，然后调用滑块（“刷新”）就可以了：

$("#f_range").slider();

显然，jQuery移动代码中存在一些错误导致此问题，但至少有一种解决方法。

* 更新 * ：注意到在iOS 5上滑块现在也出现在Safari原生滑块旁边，没有包含实际值的文本框。仍在努力寻找解决办法。

Answer 4

我猜测滑块实际上并不在该页面上，即滑块位于DOM中的某个位置，而不是表示[jQuery Mobile]页面的元素中包含的元素之一，这些元素在页面加载时被初始化。有关详细信息，请参阅jQM的page events。

这是一种只刷新页面上的滑块的方法：

$(document).on("pagecreate", function(event) {
    $(event.target).find("input[type=number]").slider("refresh");
});

Answer 5

尝试使用on pageinit代替bind pagecreate。

if (!jQuery.fn.on) jQuery.fn.on = jQuery.fn.live; // older versions of jQuery

$("#mypage").on("pageinit", function(){
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});

或：

$(document).on("pageinit", "#mypage", function() {
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});

刷新时出现Jquery移动滑块错误

5 个答案: