0

我正在尝试在对话框页面中实现 JQuery Mobile 滑块。

单击按钮时会创建对话框。在此按钮的回调中，我打算从服务器获取一些 JSON 数据并用数据填充对话框。代码片段如下：

$('.class-CheckOutList').live ("click", function (event)
{
    $.post("getItemDataForDataEntry.php", {"name":selectedItemID},
        function(data){             
            $.each(data, function(index,value){
                dialogHTML = '<input type="range" name="slider"';
                dialogHTML +=' id="slider-0" value="0" min="0" max="100">';
                $("#itemDataEntryFormContent").html(dialogHTML);                        
                });
            }
            ,"json");
});

问题是上面的代码没有正确渲染滑块。抱歉，由于我是这个论坛的新手，所以我无法发布图片来展示我得到的东西。

但是，以下代码似乎可以正常工作：

$('.class-CheckOutList').live ("click", function (event)
{
                dialogHTML = '<input type="range" name="slider"';
                dialogHTML +=' id="slider-0" value="0" min="0" max="100">';
                $("#itemDataEntryFormContent").html(dialogHTML);                        
});

有人可以帮忙吗？

谢谢。

+++++++++++++++++++++

更新 --> 我已经设法解决了这个问题，但是在我应用解决方案之后又发生了另一个类似的问题。

我做了什么 --> 以前，为了激活回调，我使用了这样的东西：

    <a href='#itemDataEntryDialog' data-rel='dialog' data-role='button'>Change</a>";

创建对话框。

我所做的解决方案是将以上内容更改为：

    <a data-role='button'>Change</a>";

并将代码更改为：

$('.class-CheckOutList').live ("click", function (event)
{
    $.post("getItemDataForDataEntry.php", {"name":selectedItemID},
        function(data){             
            $.each(data, function(index,value){
                dialogHTML = '<input type="range" name="slider"';
                dialogHTML +=' id="slider-0" value="0" min="0" max="100">';
                });
                $("#itemDataEntryFormContent").html(dialogHTML);                        
                          $.mobile.changePage($('#itemDataEntryDialog'), {role: "dialog"} );
            }
            ,"json");
});

所有这些更改都会导致对话框正确呈现。

但是，当我第二次单击该按钮时，对话框渲染再次失败（就像以前一样）。

所以，我有点回到第一方......

如果能在这里得到一些帮助将不胜感激。它快把我逼疯了。

4

1 回答 1

0

我认为你应该调用 $('#myInput').slider() 来强制 jquerymobile 初始化你的新控件。

在你的情况下，我会添加类似的内容：

$('#itemDataEntryFormContent input[type="range"]').slider()

...就在 html() 调用和 changepage() 调用之间。

滑块控件的另一个有用功能是调用 $('#mycontrol').slider('update') 如果您通过脚本更新了值。

希望这对某人有帮助:)

于 2012-06-25T12:10:51.863 回答