javascript - bootstrap popover wont close in mobile -


i have simplified html code post here. first have empty p-tag. table-tag containing popover-anchor. , empty p-tag. when on desktop, after click anchor , popup displays, wherever click on page, popover closed. however, when on mobile (safari ios), popover close if click/tap @ end of page. means, area after last empty p-tag. have researched lot. im not sure, maybe listening "tap" instead of "click"? dont understand why click outside tags inside body makes popover disappear.

<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="/components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet"> <script type="text/javascript" src="/components/jquery/dist/jquery.js">     </script>     <script type="text/javascript" src="/components/bootstrap/dist/js/bootstrap.js"></script> <script> $(function () { $('[data-toggle="popover"]') .on('click',function(e){ e.preventdefault(); }) .popover(); }) </script> </head> <body>  <p style="background-color:green">&nbsp;</p> <table border=1 cellspacing=2  cellpadding=2 >     <tr>        <td><b>lowest</b></td>     </tr>     <tr>        <td>             <a                  data-html="true"  data-trigger="focus" tabindex="0" role="button" href="#" data-toggle="popover" data-placement="right"                  data-content="<div>this html</div>">                     1             </a>        </td>    </tr> </table> <p style="background-color:yellow">&nbsp;</p> </body> </html> 

the problem on iphone onclick on body element doesnt work. try code simple html-page have code: $(function () { $('body').on('click touchstart', function (e) { alert("clicked"); }); }); well, on iphone there not alert. focusing on that, discovered there few workaround this. 1 workaround have css-directive on element want clickable (in case body-tag, in cse may want put wrapper envolping body-content). directive simply: cursor:pointer;

as dont want elements show pointer, need detect if client ios.


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -