Geek Answers Handbook

Float: left stop click event on android?

I have two divs side by side (via float: left). on these two divs I got a lot of other divs waiting to be clicked. it works on firefox, but in android, when I click the click event, it just fires sometimes. if I remove the floats: everything works.

any ideas?

my divs:

<div style="float:left; width: 50%"> <div class="btn" id="andBtn">and</div> <div class="btn" id="butBtn">but</div> <div class="btn" id="comeOnBtn">come on</div> <div class="btn" id="doNotBtn">do not</div> <div class="btn" id="heyBtn">hey</div> <div class="btn" id="howBtn">how</div> <div class="btn" id="iDontBtn">i don`t</div> <div class="btn" id="iAmBtn">i am</div> <div class="btn" id="itIsBtn">it is</div> </div> <div style="float:left; width: 50%"> <div class="btn" id="noBtn">no</div> <div class="btn" id="thatIsBtn">that is</div> <div class="btn" id="thereIsBtn">there is</div> <div class="btn" id="thisIsBtn">this is</div> <div class="btn" id="waitBtn">wait</div> <div class="btn" id="whatBtn">what</div> <div class="btn" id="whyBtn">why</div> <div class="btn" id="yeahBtn">yeah</div> <div class="btn" id="youBtn">you</div> </div>

click event binding:

 for(var category in categories){ var e = function(category){ $('#'+category+'Btn').click(function(){ alert('click') show(category) })} e(category)
+4
source share
1 answer

using position: absolute works

 <div style="position:absolute; width: 50%"> <div class="btn" id="costumBtn" style="background-color: darkorange;">favorites</div> <div class="btn" style="background-color: darkblue;" id="laughBtn">laugh</div> <div class="btn" style="background-color: darkblue;" id="helloBtn">hello</div> <div class="btn" id="alrightBtn">alright _</div> <div class="btn" id="andBtn">and _</div> <div class="btn" id="butBtn">but _</div> <div class="btn" id="comeOnBtn">come on _</div> <div class="btn" id="doNotBtn">do not _</div> <div class="btn" id="heyBtn">hey _</div> <div class="btn" id="howBtn">how _</div> <div class="btn" id="iDontBtn">i don`t _</div> <div class="btn" id="iAmBtn">i am _</div> <div class="btn" id="itIsBtn">it is _</div> </div> <div style="position:absolute; left:50%; width: 50%"> <div class="btn" id="randomBtn" style="background-color: darkgreen;">random</div> <div class="btn" style="background-color: darkblue;" id="soundBtn">sound</div> <div class="btn" style="background-color: darkblue;" id="bestBtn">best</div> <div class="btn" id="noBtn">no _</div> <div class="btn" id="thatIsBtn">that is _</div> <div class="btn" id="thereIsBtn">there is _</div> <div class="btn" id="thisIsBtn">this is _</div> <div class="btn" id="waitBtn">wait _</div> <div class="btn" id="whatBtn">what _</div> <div class="btn" id="whyBtn">why _</div> <div class="btn" id="yeahBtn">yeah _</div> <div class="btn" id="youBtn">you _</div> <div class="btn" id="allBtn" style="background-color: black;">all 1153</div> </div>
+1
source

More articles:


All Articles