jquery - Adding another div dynamically pushes all scrolls of previous divs up -


my html looks this:

<div id="main">   <div style="height:200px; width:100px; overflow:scroll; display:inline-block;">     hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>   </div> </div> <input type="submit" id="clickme" /> 

and jquery looks this:

$('#clickme').on('click', function() {      $('#main').html($('#main').html() + '<div style="height:200px; width:100px; overflow:scroll; display:inline-block;"> hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/></div>');   }); 

this live example here.

when scroll down first div , click submit, should add div right of not scroll first div up. took me ages realize problem was, thought share it.

the solution quite simple though. adding controls html wrong way. should have done using insertafter function in jquery this:

$('#clickme').on('click', function() {     $('<div style="height:200px; width:100px; overflow:scroll; display:inline-block;">   hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  </div>')     .insertafter($('#main').children().last());   }); 

as shown in link.


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

node.js - Bad Request - node js ajax post -

uitableview - Create and use custom prototype table cells in xamarin ios using storyboard -