jquery - 单击按钮时启用/禁用 Bootstrap 弹出窗口

Question

在我的 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”按钮时才出现此弹出窗口。但问题是，只有当我再次单击该输入时才会出现弹出窗口 - 而不是单击按钮时。

您能告诉我正确的方法吗？

提前致谢。

Answer 1

以下脚本以正确的方式执行:

<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>