jQuery Mobile - slider 的值始终为零

Question

我正在尝试获取动态生成的 slider 的值。不幸的是，无论我做什么，它们总是返回“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”结束或什么都没有，具体取决于我正在尝试的内容。

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

大家对我有什么建议吗？

谢谢!

Answer 1

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

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

Demo