Question

我正在尝试在对话框页面中实现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);                        
});

有人可以帮忙吗？

感谢。

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

更新 - ＆gt;我已设法解决问题，但在应用解决方案后又发生了另一个类似的问题。

我做了什么 - ＆gt; 以前，为了激活回叫，我使用了这样的东西：

    <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");
});

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

然而，当我第二次单击该按钮时，对话框渲染再次失败（如前所述）。

所以，我有点回到原点.......

如果能在这里得到一些帮助，我将不胜感激。这让我疯了。

Answer 1

我认为你应该调用$（'＃myInput'）。slider（）来强制jquerymobile初始化你的新控件。

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

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

...就在html（）调用和changepage（）调用之间。

滑块控件的另一个有用功能是调用$（'＃mycontrol'）。slider（'update'）如果你通过脚本更新了值。

希望这有助于某人：）

Jquery Mobile滑块在动态创建的对话框页面中无法正确呈现

1 个答案: