CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
OpenCode
OpenCode

Reputation: 325

when ajax load popover closed with hide(), popover button make one more click

when I click popover button, it works well.
when I close popover clicking x on title section, popover button dees not work. I need one more click for popover.

working code (http://www.opencode.co.kr/popover_test.php)

I use code of mcianni.
(http://blog.2doconsulting.com/blog/2012/03/15/loading-the-content-for-a-bootstrap-popover-via-ajax/) and (http://jsfiddle.net/kAYyR/3/)

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=euc-kr">

<title>OpenCode</title>

<link rel="stylesheet" href="http://opencode.co.kr/js/bootstrap/css/bootstrap.min.css?bver=1000" type="text/css" media="screen" title="no title" charset="euc-kr">
<link rel="stylesheet" href="http://opencode.co.kr/js/font-awesome/css/font-awesome.min.css?aver=1000" type="text/css" media="screen" title="no title" charset="euc-kr"> 

<!--[if lt IE 7]>
    <script src="http://opencode.co.kr/js/font-awesome/css/font-awesome-ie7.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://opencode.co.kr/style.css?sver=2110" type="text/css">

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://opencode.co.kr/js/bootstrap/js/bootstrap.min.js"></script>

<body>
<br><br>
<a class="btn btn-default sideview">popover</a>
<a class="btn btn-default sideview" alt="test12">popover</a>

<script>
$(document).ready(function() {
      $('.sideview').popover({
        content: "aa",
        title: 'Sideview&nbsp;<a onclick="$(this).parent().parent().hide();" style="cursor:pointer"><i class="fa fa-times-circle"></i></a>',
        html: true,
      }).popover('show');
});
</script>
</body>
</html>

Upvotes: 0

Views: 604

Answers (1)

Tony
Tony

Reputation: 7445

I think this should help:

onclick="$('.sideview').popover('hide')"

If you show it using popover then you should hide it using popover too.

EDIT

Somehow solution above is not workin in your case, the only way I found for this is:

var index = 0;

$('.sideview').each(function(i, el) {
     var id = index++;

     $(el).popover({
         content: "aa",
         title: 'Sideview&nbsp;<a style="cursor:pointer" id="a'+id+'">x</a>',
         html: true
     });

     $(document).on('click', '#a' + id, function() {
         $(el).popover('toggle');
     });
});

DEMO

Upvotes: 1

Related Questions