Question

当您第一次点击＆＃34;打开Summernote＆＃34;链接。 Ajax已成功加载和summernote按预期初始化。
关闭模态框并单击＆＃34;打开Summernote＆＃34;链接。什么都没发生。
关闭模态框并单击＆＃34;打开Summernote＆＃34;链接。 Summernote按预期初始化。
关闭模态框并单击＆＃34;打开Summernote＆＃34;链接。没有任何事情发生。

....它会继续这样。

在加载内容之前，我不知道收到的ajax内容是否包含summernote编辑器。因此，在ajax成功函数中初始化summernote不是一种选择。

正文：

<body>
    <a href="modal.html" class="ajaxPopup">Open Summernote</a>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                     <h4 class="modal-title">Modal title</h4>

                </div>
                <div class="modal-body">
                    <div class="te"></div>
                </div>
            </div>
        </div>
    </div>
<script type='text/javascript'>
var $myModal = null;
$(document).ready(function () {
    $myModal = $('#myModal');
    $('.ajaxPopup').on('click', function () {
        $.ajax({
            url: 'modal.html',
            type: 'GET',
            context: this,
            success: function (response) {
                $myModal.find('.modal-title').html("Summernote");
                $myModal.find('.modal-body').html(response);
                $myModal.modal({
                    show: true,
                    backdrop: true
                });
            }
        });
        return false;
    });
});
</script>
</body>

modal.html内容

<div id='commentBox'></div>
<script type='text/javascript'>
    $(function () {
        $('#commentBox').summernote();
    });
</script>

有什么建议吗？

Answer 1

在打开之前清空模态正文内容可以解决此问题。

http://jsfiddle.net/gze70ov2/

var $myModal = null;
$(document).ready(function () {
    $myModal = $('#myModal');
    $('.ajaxPopup').on('click', function () {
        $myModal.find('.modal-body').html('');
        $.ajax({
            url: '/echo/html/',
            data: {
                html: "<div id='commentBox'></div>" + "<script type='text/javascript'>$(function () {$('#commentBox').summernote();});<\/script>"
            },
            type: 'POST',
            context: this,
            success: function (response) {
                $myModal.find('.modal-title').html("Summernote");
                $myModal.find('.modal-body').html(response);
                $myModal.modal({
                    show: true,
                    backdrop: true
                });
            }
        });
        return false;
    });

}）;

Summernote甚至没有初始化甚至ajax请求bootstrap 3模态

1 个答案: