onclick $ {document.body）.append（）无法正常工作

Question

在这里，我想在onc​​lick事件上显示引导模式。 Onclick事件alert（）即将到来，但是$（document.body）.append（）（模态代码）未初始化……我在控制台中也没有收到任何错误...这是我的代码...

    (function() {  
tinymce.create('tinymce.plugins.wpc', {  
    init : function(ed, url) { 
        ed.addButton('wpc', {  
            title : 'Add Contact Us form',  
            image : url+'/dd_note.gif', 
            onclick : function() {
                alert("hii"); // it's coming on onclick event

                $(document.body).append('<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">&times;</button> <h4 class="modal-title" id="myModalLabel">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');

                $('#myModal').modal();
            }  
        });  
    },  
    createControl : function(n, cm) {  
        return null;  
    },  
});  
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);  
})();

谁能建议我我的代码出了什么问题？

提前致谢

Answer 1

在您的html中有脚本标记，某些浏览器不允许将其添加为文本，因此您必须从javascript创建脚本dom元素，然后附加它或尝试类似的操作：

替换为您添加的html：

<script> showForms("'+url+'"); </script>

至：

<script> showForms("'+url+'");</' + 'script>

使浏览器知道它是脚本标记。

附加此html的工作演示

Answer 2

尝试这个

(function() {  
tinymce.create('tinymce.plugins.wpc', {  
    init : function(ed, url) { 
        ed.addButton('wpc', {  
            title : 'Add Contact Us form',  
            image : url+'/dd_note.gif', 
            onclick : function() {
                alert("hii"); // it's coming on onclick event

                $('body').append('<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">&times;</button> <h4 class="modal-title" id="myModalLabel">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');

                $('#myModal').modal('show');
            }  
        });  
    },  
    createControl : function(n, cm) {  
        return null;  
    },  
});  
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);  
})();