Dynamically added/created Mobiscroller not functioning

Question

Backstory:

In this project I am doing I have a block of code(a few form lines) that is duplicated when a user clicks the "+ add destination" button.

The scroller for picking a time is included in the block of code but since the new content(more destination inputs) is dynamically added/created any of the new scrollers aren't working because they don't see or pick up the javascript code(since page isn't reloaded).

---

Question:

I need to find a way to make it so that when the "+ add destination" button is clicked and a new destination input is created the user can click on the time input and select a time with the mobiscroller.

---

Here is the my jsFiddle for the problem

Here is my code code where the mobiscroller is: <div class="form-spinner"><input type="text" id="scroller" class="input-text" name="scroller" placeholder="00:00"> </div>

and here is the script is:

<script>
$(function(){
// create a timepicker with default settings
$("#scroller").mobiscroll().time({theme: 'android-ics light',
    display: 'modal', mode: 'scroller', showLabel:false, headerText:'Set an arrival time', button3:'clear', button3Text:'Clear' }); // Shorthand for: $("#scroller").mobiscroll({ preset: 'time' });
});
</script>

I know I'm using an id but when I change it to class, something in the mobiscroller script creates an id for the scroller and then each new scroller gets the same id

Answer 1

You'll need to call .mobiscroll() on the new content, as it wasn't called with the $(document).ready(call.

function createNewDestination() {
    count++;
    //Create new content
    var newContent = $('<div/>', {
        html: GetHtml()
    });      
    //Add event handlers to new content
    newContent.find(".spinner-item").click(spinnerItemClicked);
    newContent.mobiscroll().time({theme: 'android-ics light',
        display: 'modal', mode: 'scroller', showLabel:false, clearText:'clear', headerText:'Set an arrival time', button3:'clear', button3Text:'Clear' });
    return newContent;  
}

Additionally, you've got a slight syntax error in getHTML. You're pulling #scroller from the main document, not $html. Change:

$('#check').attr('id', 'check' + count + '');
$('#scroller').attr('id', 'scroller' + count + '');

To:

$html.find('#check').attr('id', 'check' + count + '');
$html.find('#scroller').attr('id', 'scroller' + count + '');

JSFiddle