Question

我正在尝试获取动态生成的滑块的值。不幸的是，无论我做什么，它们总是返回值“0”或null。我无法弄明白......

以下是我正在使用的HTML代码：

<input type="number" data-type="range" class="init_slider ui-input-text ui-body-b 
ui-corner-all ui-shadow-inset ui-slider-input" name="init_slider_0" id="init_slider_0" 
min="-5" max="30" />

   <div role="application" class="ui-slider-track ui-btn-down-b ui-btn-corner-all">

      <a href="#" class="ui-slider-handle ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all" 
data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" 
data-theme="b" role="slider" aria-valuemin="-5" aria-valuemax="30" aria-valuenow="14" 
aria-valuetext="14" title="14" aria-labelledby="init_slider_label_0" style="left: 
54.285714285714285%;"><span class="ui-btn-inner"><span class="ui-btn-text"></span></span></a>
   </div>

我的JS（它可能效率低下，但我只是想让它发挥作用）：

$('[data-role="page"]').live('pageshow', function () {
 $(".init_slider").change(function() {
    var init_data = {};
    $.each(".init_slider_label", function(index, option) {
        char_name = $("#init_slider_label_"+index).text();
        var init_val_desc = $("#init_slider_"+index).next();
        var init_val_foo = $(init_val_desc).children("a")[0];
        var init_foo = $(init_val_foo);
        var init_val = $(init_foo).attr('aria-valuenow');
        init_data[char_name] = init_val;
     });
   });
});

init_val的值似乎总是最终为“0”或者什么都不是，这取决于我正在尝试的内容。

我认为这个问题不是特定于滑块的，因为当我将它们更改为简单的文本字段时，我遇到了同样的问题：总是返回值为'0'。所以我想知道它是否与我如何调用此代码有关。正如您在上面的示例中所看到的，我正在使用'pageshow'来完成它。但点击按钮后我遇到了同样的问题。

有人对我有什么建议吗？

谢谢！

Answer 1

对于动态注入的项目，您应该以这种方式绑定事件。

$(document).on("change", ".init_slider", function() {
 var slider_val = $(this).val();
 console.log(slider_val);
});

<强> Demo

Answer 2

我有同样的问题，我发现绑定不起作用，但是应该尝试上面的方法，解决它我添加了隐藏的输入，更新了每个滑块更改的隐藏输入值等。

jQuery Mobile - 滑块的值始终为零

2 个答案: