twitter-bootstrap 单击按钮时启用/禁用引导程序弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21218354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable/disable bootstrap popover when clicking a button
提问by Nervosa
In my Django project i have a very simple form containing just an input element and a submit button. Django form looks like this:
在我的 Django 项目中，我有一个非常简单的表单，只包含一个输入元素和一个提交按钮。Django 表单如下所示：
class CoopAnonymousEnterForm(forms.Form):
nickname = forms.CharField(min_length=3, widget=forms.TextInput(attrs={
'class': 'form-control',
'placeholder': 'Enter nickname here',
'data-container': 'body',
'data-toggle': 'popover',
'data-placement': 'top',
'data-content': 'Enter at least three characters.',
}))
My page contains the following:
我的页面包含以下内容：
<form role="form" action="/anonymous_enter/" method="post">
{% csrf_token %}
<div class="form-group">
<!--<input type="text" class="form-control" placeholder="Nickname">-->
{{ anonymous_enter_form.nickname }}
</div>
<button id="anonymous-enter-button" type="submit" class="btn btn-default green">Start anonymously</button>
<button id="test-popover" type="button" class="btn btn-default">
Click!
</button>
</form>
...
<script>
$("#test-popover").on('click', function(){
var anonymous_nickname = $("#id_nickname").val();
if (anonymous_nickname.length <= 2) {
$('#id_nickname').popover();
}
});
</script>
I would like this popover to appear only when user entered less than three characters into an input and clicked "test-popover" button. But the problem is that popover appears only when i click that input once again - not when the button is clicked.
我希望仅当用户在输入中输入少于三个字符并单击“test-popover”按钮时才会出现此弹出窗口。但问题是只有当我再次单击该输入时才会出现弹出窗口 - 单击按钮时不会出现。
Could you show me the right way to do that please?
你能告诉我正确的方法吗？
Thanks in advance.
提前致谢。
回答by Nervosa
The following script does the right way:
以下脚本以正确的方式执行：
<script>
$("#test-popover").on("click", function(){
var anonymous_nickname = $("#id_nickname").val();
if (anonymous_nickname.length <= 2) {
$('#id_nickname').popover('show');
} else {
$('#id_nickname').popover('destroy');
}
});
</script>
