刷新时Jquery移动滑块错误答案

【问题标题】：Jquery mobile slider error on refresh刷新时Jquery移动滑块错误
【发布时间】：2011-08-21 15:42:34
【问题描述】：

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

未定义

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

尝试调用方法“刷新”

这是我的代码的简化版本

$("#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 事件，我不知道到底出了什么问题。

【问题讨论】：

标签： jquery events jquery-mobile

【解决方案1】：

刷新表单元素

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

复选框：

$("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)

【讨论】：

【解决方案2】：

您需要发布您的实际代码以获得正确答案。

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

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

或者...

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

我确定您已经看过此页面，但如果您还没有看过此页面底部附近的“页面初始化事件”部分中的内容可能会有所帮助...

Page initialization events

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

Working with jQuery Mobile's Auto-initialization

【讨论】：

【解决方案3】：

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

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

然后你只需要手动初始化如下，之后调用 slider("refresh") 就可以了：

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

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案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");
    }
});

【讨论】：