Question

This is my code:

    newS = "#newS_"+g; //g is a unique number from an id
    document.getElementById('finderScroll').innerHTML +='<div id="newS_'+g+'"></div>'
       $(newS).slider({
              range: true,
              min: 0,
              max: 500,
              values: [ 75, 300 ],
              slide: function( event, ui ) {
              console.log( ui.values[ 0 ] + ui.values[ 1 ] );
                 }
              });

Each new slider works, but when I add another, the previous slider no longer functions. It causes it to no longer be draggable even though everything about each slider is unique. Does anyone know the solution to this?

Answer 1

By updating innerHTML you essentially make the browser to rebuild your DOM from the scratch. Use appendChild instead, that will preserve the event handlers AND data attached to the existing elements.

In fact, I don’t see why you cannot write like this:

$('#finderScroll').append($('<div>').attr('id', 'newS_' + g));

… as you already use jQuery. Also, I’d suggest rewriting the assigner block too: you don’t need to traverse the DOM looking for that created element (with $(newsG)), as you can write this:

$('<div>').attr('id', 'news_' + g).slider({ ... })
    .appendTo($('#finderScroll'));