javascript - Bootstrap 弹出框只显示一次。为什么？

Question

我使用 jQuery 在 html 中实现了 popover。

但是，如果弹出框显示然后消失，则不会再次显示相同的弹出框。

我也尝试过css("display", "none")，但没有奏效。

在这个问题上卡了 3 天。请给我一个解决方案。

下面是我写的代码。

如果同一个按钮被按下两次或更多次，就会出现以下错误。

未捕获的类型错误：无法读取未定义的属性“nodeType”

$(document).ready(function() {
    $(document).on('click', '.btn-danger', function() {
        var $this = $(this);
        var checkBtn = $(this);

        selected_line = checkBtn.text().substring(11) * 1;

        selected_td = checkBtn.parent();
        console.log(checkBtn.text())
        
        $(selected_td.children('#popover'+selected_line)).popover({
                trigger     :   'click',
                placement   :   'right',
                html        :   true,
                content     :   function() {
                    var pop =  selected_td.children('#advice_line'+selected_line);
                    pop.show();
                    return pop
                },
                container   :   'body'
        });

        //attach link text
        $('.popover-textarea').val($this.text()).focus();

        //hide any visible comment-popover
        $(selected_td.children('#popover'+selected_line)).not(this).popover('hide');
        var $this = $(this);

        //close on cancel
        $(selected_td.find('#popover_cancel'+selected_line)).click(function() {
            //$this.popover('dispose')
            $('#popover'+selected_line).popover('dispose')
        });

        //update link text on submit
        $(selected_td.find('#popover_submit'+selected_line)).click(function() {
            $this.text($('.popover-textarea').val());
            $this.popover('dispose');
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a id="popover1" data-html="true" href="#" data-toggle="tooltip" rel="comments"
                            class="btn btn-danger">advice_line1</a>

    <div class="popover" style="display: none;" id="advice_line1">
        <div class="popover-arrow"></div><h3 class="popover-header">Advice</h3>
        <div class="popover-body"><div class="popover-content"><textarea class="popover-textarea">advice_line1</textarea></div></div>
        <div class="popover-footer">
            <button id="popover_submit1" type="button" class="btn btn-primary">submit</button>&nbsp;
            <button id="popover_cancel1" type="button" class="btn btn-default">cancel</button>
        </div>
    </div>

标签： javascripthtmljquerybootstrap-4