在我的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.',
}))
我的页面包含以下内容:
<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>
我希望只有当用户在输入中输入少于三个字符并单击“test-popover”按钮时才会显示此弹出框。但问题是只有当我再次点击该输入时才会出现弹出窗口 - 而不是在单击该按钮时。
你能告诉我正确的方法吗?
提前致谢。
答案 0 :(得分:4)
以下脚本以正确的方式执行:
<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>