Question

我尝试使用popover，但问题是关闭按钮无法在data-content内部工作，我已经尝试将其放入title并且工作正常但我真的需要把它放在data-content :) 你谢谢大家......

＆＃13;

$(function () {
        $('[data-toggle="popover"]').popover();
        
});

＆＃13;

.btn {
  margin:80px
}

body {
  background: #f5f5f5
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button class="btn btn-success btn-edit"
                                                            data-toggle="popover"
                                                            data-html='true' data-placement="bottom"
                                                            data-content='<button type="button" id="close" class="close" onclick="$(&quot;.btn-edit&quot;).popover(&quot;hide&quot;);">&times;</button>'>
                                                        CLICK ME
                                                    </button>

＆＃13;

Answer 1

HTML实体（"）不会在JavaScript表达式中解析，而是onlick属性中的内容。但你可以使用反引号而不是单引号。即：

<button data-content='<button onclick="$(`.btn-edit`).popover(`hide`);">...</button>'>

＆＃13;

$(function () {
        $('[data-toggle="popover"]').popover();
        
});

＆＃13;

.btn {
  margin:80px
}

body {
  background: #f5f5f5
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button class="btn btn-success btn-edit"
                                                            data-toggle="popover"
                                                            data-html='true' data-placement="bottom"
                                                            data-content='<button type="button" id="close" class="close" onclick="$(`.btn-edit`).popover(`hide`);">&times;</button>'>
                                                        CLICK ME
                                                    </button>

＆＃13;

bootstrap Popover关闭按钮不起作用

1 个答案: