javascript - jQuery - 单击时使用 Load() 重新加载 Bootstrap Popover 窗口

Question

我环顾四周并尝试了许多不同的选项来使其正常工作，但不知何故我找不到解决方案。

我有一个 boostrap popover 窗口，它将 load() 外部 url。

当我第一次单击弹出按钮时，一切正常，但一旦关闭弹出窗口，一旦窗口关闭，查询功能将不会在单击时重新加载。

理想情况下，每次点击调用popover时，popover窗口都会重新加载新数据。

我的按钮:

<a class="btn btn-default btn-sm pop-class"
                data-container="body"
                data-toggle="popover"
                data-placement="left"
                id="{{ instance.id }}"></a>

这是我的脚本

$('.pop-class').popover({
        html: true,
        title: function() {
            return $("#my-head").html();
        },
        content: function() {
            $('#hidden-input').val(this.id);
            var id = this.id + '#container';
            return $( "#my-content" ).load( "/mypage/"+id );
        }

    });

更新:

场景:

这个应用程序有一个外部 html 表单，用户可以根据需要加载。由于此表单是动态的，并且允许用户更新当前数据，因此表单会使用实例数据动态加载。

由于用户可以随时关闭popover并稍后返回，因此load()函数应始终根据实例ID加载新数据 或加载新条目的空表单。

Answer 1

完全更新的答案

如果我理解你的任务，我建议你不要使用 Bootstrap (这不是它的设计目的)。

有一个基于 JQuery Ui 的代码片段。 (JQuery UI Dialog docs)

有一个按钮可以打开一个带有 <iframe> 的对话框。每次打开对话框时都会加载一些网页。

如果您不需要 iframe，则可以加载任何其他内容。

$(function () {
    
    // Setting up the dialog
    $('#dialog1').dialog({
        // Hidden for now
        autoOpen: false,
        // Title
        title: 'My External Form',
        // Width in px
        width: 790,
        // Dialog close event handler
        close: function() {
            // Looking for an iframe inside it
            $(this).find('iframe').
                // Clearing its contents
                attr('src', 'about:blank');
        }
    });

    // Looking for our dialog
    $('#dialog1').
        // Looking for JQuery UI initialized dialog (up the DOM tree)
        closest('.ui-dialog').
        // Looking for dialog title (down the DOM tree)
        find('.ui-dialog-title').
        // Prepending the title with an Font Awesome icon
        prepend('<i class="fa fa-list fa-lg grey"></i>');

    // Subscribing to the click on the button
    $('button.show-dialog').click(function () {
        // Caching the JQuery button object
        var $button = $(this);
        // Getting ID of the associated dialog from 'data-dialog' attribute
        var dialogId = $button.data('dialog');
        // If there is an ID
        if (typeof(dialogId) != 'undefined')
        {
            // Getting a JQuery UI dialog by ID
            var $dialog = $('#' + dialogId);
            // Opening the dialog
            $dialog.dialog('open');
            // Loading a content to the iframe
            $dialog.find('iframe').attr('src', 'http://apple.com');
        }
    });
});

.dialog
{
    display: none;
}

.ui-dialog-titlebar i.fa {
    margin-right: 0.75em;
}

.ui-dialog .dialog.ui-dialog-content
{
    padding: 0;
    overflow: hidden;
}

.dialog iframe
{
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">

    <div class="container">
        <button class="show-dialog" data-dialog="dialog1"><i class="fa fa-arrow-left fa-lg orange">My Button</i></button>

        <div class="dialog" id="dialog1">
            <iframe id="dialog1-frame" name="dialog1-frame" width="100%" height="100%"></iframe>
        </div>
    </div>