2012-04-25 110 views
2

我有一個簡單的上傳表單,允許多次上傳,並且爲每個選定的文件創建一個新的滑塊。動態添加jQuery的滑塊

我得到它創造一個新的滑塊,他們每個人都有個人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); 

當您在文本框中手動輸入數字時,滑塊的位置將更新 - 以便按原樣進行操作。但是這種方式並不適用。 我猜這是因爲當頁面加載時沒有加載滑塊,但我不知道它的修復。

回答

0

所以,傢伙..原來,它有助於如果你得到身份證的權利。

1

添加任何新的jQuery滑塊dynamicaly最簡單的方法是:

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

我希望它可以幫助別人