jQuery滑塊：只有最後一個滑塊在多頁滑塊頁面上工作

我正在製作一個包含多個滑塊的頁面，其中滑塊的數量和選項根據用戶而不同。我在創建並顯示所有滑塊時遇到問題，但只有最後一個滑塊可拖動。jQuery滑塊：只有最後一個滑塊在多頁滑塊頁面上工作

簡單的jsfiddle證明什麼，我說什麼：http://jsfiddle.net/2crev/3/

我不知道這個問題是在這裏。所有滑塊的id都是獨一無二的，我在html之後創建了滑塊。任何人都知道發生了什麼事？謝謝！獲取問題上的FF 26，鉻31，IE 11

HTML：

<div id="sliders" style="width: 100px"> 
</div>

CSS：

div.slider { 
    margin-top: 5px; 
    margin-bottom: 30px; 
}

JS：

var numberOfSliders = Math.floor(Math.random()*5) + 2; 

for (var i=0; i < numberOfSliders; i++) { 
    // Insert HTML 
    var html = '<div>Slider '+i+'</div>' 
       +'<div class="slider" id="slider-'+i+'"></div>'; 
    document.getElementById('sliders').innerHTML += html; 

    // Create Slider 
    $('#slider-'+i).slider({ 
     value: Math.floor(Math.random()*10) + 1, 
     min: 0, 
     max: Math.floor(Math.random()*5) + 10, 
     step: 1, 
     orientation: "horizontal", 
     range: "min", 
     animate: true 
    }); 
} 

console.log(document.getElementById('sliders').innerHTML);

來源

2014-01-11 Chun

問題是，您在每次循環迭代中都要更換內部html。在每次循環迭代你：

創建2個新的div，
更換<div id="sliders">內部HTML
然後初始化在新的div了jQuery UI的滑塊。

問題在於步驟2.因爲您正在替換內部html（您正在替換DOM元素），所以jquery-ui綁定的所有事件在下一次循環迭代時都會丟失。因此，只有在上次迭代中初始化滑塊纔有效。

有在this jsFiddle看看其中的jQuery .append()功能在使用innerHTML代替：

$('#sliders').append(html);

隨着.append()只添加新的元素到DOM，而不是更換所有在<div id="sliders">

現有的一個

來源

2014-01-11 14:17:07 rd3n

唉！這很奇怪。我只是假設.innerHTML + = html與.append（）具有相同的效果。我不知道它會破壞DOM中的東西。謝謝！ – Chun

jQuery滑塊：只有最後一個滑塊在多頁滑塊頁面上工作

回答

相關問題