Summernote 甚至没有在 bootstrap 3 modal 的 ajax 请求上初始化答案

【问题标题】：Summernote not initialized on even ajax requests for bootstrap 3 modalSummernote 甚至没有在 bootstrap 3 modal 的 ajax 请求上初始化
【发布时间】：2015-08-07 09:41:52
【问题描述】：

示例：http://jsfiddle.net/atfb8huL/

当您第一次单击“打开 Summernote”链接时。 Ajax 加载成功并且summernote按预期初始化。
关闭模态框并单击“打开 Summernote”链接。什么都没发生。
关闭模态框并单击“打开 Summernote”链接。 Summernote 按预期初始化。
关闭模态框并单击“打开 Summernote”链接。什么都没有发生。

....它会像这样继续下去。

我不知道在加载内容之前收到的 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>

有什么建议吗？

【问题讨论】：

标签： jquery ajax twitter-bootstrap summernote

【解决方案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;
    });

});

【讨论】：

我说这不是一个选项:( ---> 我不知道在加载内容之前收到的ajax内容是否包含summernote编辑器。所以在ajax成功函数中初始化summernote不是一个选项.
@GöktuğÖztürk 抱歉，我没看到。我已经用另一个选项更新了我的答案。
我之前试过$myModal.find('.modal-body').html('').html(response);。但它也没有奏效。这个解决了我的问题。谢谢。