动态添加jQuery的滑块控件

Question

我有一个简单的上传表单，可以允许多个文件上传，每选定一个文件就需要创建一个新的滑块。

我已经成功地创建了新的滑块，它们都有独立的 ID。唯一的问题是，我希望每次滑动或更改时，滑块将其值输入到文本框中。对于普通的滑块它可以正常工作，但是对于动态添加的滑块，它们不会更新它们各自的文本框。

以下是添加滑块和文本框的代码：

var pagesslider = $('<div id="pages'+(x + 1)+'" class="pages"></div><input name="anewslider" id="pages-box'+(x + 1)+'" type="text" onchange="$(\'#pages'+(x + 1)+'\').slider({ value: this.value });updatevalues();updatepages(\''+x+'\');" value="1" />');
$('#pages-holder').append(pagesslider);

addSlider('pages'+(x + 1));

addSlider函数如下：

function addSlider(element) {
var slider = $('.pages').slider({
    range: "min",
    value: 1,
    min: 1,
    max: 1000,

    slide: function(event, ui) {
        slide(element, ui.value);
    },
    change: function(event, ui) { 
        slide(element, ui.value);
    }
});
$(element).val(slider.slider('value'));
}

而幻灯片功能只是文本框的简单值更改。

$(element).attr('value', changevalue);

当您在文本框中手动输入数字时，滑块的位置会更新 - 这正常工作。 但反过来不起作用。 我猜这是因为滑块没有在页面加载时加载，但我不知道如何修复它。

- Richard Hedges

Answer 1

动态添加任何新的jQuery滑块的最简单方法是：

var fieldvalue = '<input type="range" name="loan_term" class="textbox" id="my_new_slider" min="12" max="36" step="12" value="24" />';

$('#divelement').html(fieldvalue);

$("#my_new_slider").rangeinput({
     progress: true
});

希望能对其他人有所帮助。

- Shadman

Answer 2

所以伙计们... 结果证明，如果ID弄对了，会有帮助的。

- Richard Hedges