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);  
})();