Phone touch event / div overflow

Question

My problem:

I have a css div with a table (jquery-mobile 1.0) - if I add too many lines to the div (overflow), the touch event does not skip the javascript functions ... any idea?

it does not reset functions and "overflows until it works fine!"

$('#mytable').append('<tr><td width=20%> <a href=add.html onclick=setId('+row.UserId+');> <img src=./icons/patientendaten.png width=48px height=48px></a></td> <td width=20%>'+row.Datum+'</td><td width=20%>'+row.Patient+'</td> <td width=20%><center><a href=# onclick=delete_entry('+row.UserId+');> <img src=./icons/delete.png></a></center></td><td width=20%><center> <img src=./icons/edit.png></center> </td></tr>'); 

More details:

 <div data-role="content"> <div id="twitter"> <div class="ui-grid-d"> <div class="ui-block-a"><div class="ui-bar ui-bar-d">Akte</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-d">Datum</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-d">Patient/in</div></div> <div class="ui-block-d"><div class="ui-bar ui-bar-d">Löschen</div></div> <div class="ui-block-e"><div class="ui-bar ui-bar-d">Fallbeisp. erstellen</div></div> <br> <table id=mytable> </table> </div> </div> </div> 

I am using jquery mobile 1.0 and the newest phone difference 1.7 on Android 3.2

In addition, logcat gives me (when I add line number 6)

05-24 23: 59: 18.030: E / libEGL (16161): OpenGL ES API call without current context (registered once per thread)

05-24 23: 59: 18.030: D / ShaderProgram (16161): failed to load vertex shader!

Here is my div:

Logcat:

 05-23 17:05:51.800: V/webview(30492): singleCursorHandlerTouchEvent -getEditableSupport FASLE 

Answer 1

I came up with a solution that the blue div is the problem ... jquery-mobile / phonegap have a problem with this overflow, which leads to an error!

 05-24 23:59:18.030: E/libEGL(16161): call to OpenGL ES API with no current context (logged once per thread) 05-24 23:59:18.030: D/ShaderProgram(16161): couldn't load the vertex shader! #twitter { position:absolute; top:140px; left:40px; width: 880px; height: 400px; border: 5px solid; border-color: #458d91; -moz-border-radius:16px; -khtml-border-radius:16px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; padding-top: 10px; padding-left:10px; padding-right:10px; padding-bottom: 10px; overflow: auto; } 

If I remove the overflow and height then there is no problem.

Using lists in this case is probably the best way.

I also tried different jquery-mobile, jquery - in combination with different versions of phonegap - this was tested on a Samsung Galaxy 10.1 tablet - Android 3.2

Hope this helps.