DataZombies - iScroll not working on cloned divs

Question

I am cloning both a <li> template and a subsequent <div> template(to which the <li> links) from dynamically pulled data. After the list is created I am able to refresh the s-scrollwrapper using this: $ ('#rlist').data('iscroll').refresh(); This is great. However, when it comes to the template I am having no luck in getting each of them to refresh. I've tried the above method, the jQT.setPageHeight(); method both onClick from the linking <li> and when each <div> gets created. I've even tried appending a new s- scrollwrapper into the already formed <divs> none of which seems to work.

    function loadInfo(){ 
... 
fillRedSection(availableArray, $('#entryTemplate')); 
$('#rlist').data('iscroll').refresh(); 
//Tried ways to refresh scroll of the cloned divs...nothing seems to 
work 
} 

function fillRedSection(arr, template){ 
  //iterating through the JSON data 
  for (i = 0; i<arr.length; i++){ 
        var dataLocation = arr;  //Data arr 
        var row = dataLocation[i].id;  //id# coming with JSON data 
        var newEntryRow = template.clone(); //cloned <li> template 
from HTML 
        newEntryRow.removeAttr('id'); 
        newEntryRow.removeAttr('style'); //removing hidden style 
        newEntryRow.attr('id', 'red-label'+row); //renaming the <li> 
id with the id from JSON 
        newEntryRow.attr('class', 'arrow'); //JQT class 
        newEntryRow.appendTo('#redlist ul'); //placing cloned <li> 
into ul 
        newEntryRow.find('a').attr('href','#red-'+row);//renaming href 
so it will link to the cloned <div> 
            var newEntryDetails = $('#red-description').clone(true, 
true);//cloning the div template 
            newEntryDetails.removeAttr('id'); 
            newEntryDetails.removeAttr('style');//removing hidden 
style 
            newEntryDetails.attr('id', 'reds-'+row);//renaming id so 
the <li> href can link to it 
             //1 Possible attempt at adding the scroll class as each 
div is created 
             // Hopefully avoiding problem of cloned scrolls with the 
same id name 
            /*var newScroll = $('.tester'); 
            newScroll.removeAttr('id'); 
            newScroll.attr('id', 'scroll-'+row); 
            newScroll.attr('class', 's-scrollwrapper');*/ 
            newEntryDetails.appendTo('#jqt'); //append cloned <div> to 
the main <#jqt> div. 
newEntryDetails.find('h4').text(dataLocation[i].business_name);// 
filling div from JSON 
       ... 
   } 
} 

//Attempt to refresh iScroll on the div that is being clicked on from 
the <li> 
//used onClick="refreshScroll() 
refreshScroll { 
jQT.setPageHeight(); 
} 

Nothing seems to work. I would appreciate any help on this issue.

Answer 1

Thanks for using my code. Every ID in your HTML markup has to be unique or your JavaScript won't work. When you're coloring divs, you're also duplicating the div's ID. My code dynamically assigned the div with the .s-scrollwrapper class an ID based on the page's ID. Modifying the page's ID in your code should do the trick. Also include the following in your code to set everything up.

init_iScroll('<new page's div>');