如何在“框架”上“ $（document）.ready（）”？

Question

我將包含一些小內容的頁面命名為“框架”，這些頁面是我在特定div上通過AJAX在php主頁中多次加載的，它們還將在不同地方多次顯示。

實際情況：我有一個“ Reply” div，其中包含對某條消息的所有答復，還有一個“ Reply”按鈕，該按鈕通過AJAX通過帶有Reply Input和表單的AJAX加載div中的php頁面。 當此頁面加載時，我需要通過javascript在此輸入上加載文本編輯器。

我的問題是我在要加載的每個頁面上使用<script></script> ：

<script>*Load text editor on inputs*</script>

這樣可以很好地進行加載，除非當我一次又一次地打開相同的頁面時。 然后它停止工作。

當我查看HTML以查看得到的內容時，找不到與該頁面一起加載的<script></script> 。 就像沒有加載一樣。

我不認為將<script></script>標記放置在php頁面內不是最好的方法，我需要能夠創建某種事件，該事件在頁面加載時會觸發，但不放置<script></script>在每個頁面中。

所以這是一個問題：當頁面准備好時如何通過javascript加載文本編輯器而不在每個頁面中放置<script></script>來執行操作？

我對其他方法持開放態度，因為這讓我很困惑，而且我不知道這種情況下的最佳做法是什么。

遵循真實代碼（帶有表單標簽的頁面是一個帶有“頁眉”和“頁腳”的php頁面，該頁面隨每個表單一起加載）。

reply_page.php ：（請注意，我使用PHP在元素上編寫了回復的ID，因此它們不會獲得相同的名稱）

<script>
jQuery(document).ready(function(){
    alert('it did get in here reply #<?php echo $this->uri->segment(3) ?>');

    load_tinymce(".tinymce<?php echo $this->uri->segment(3) ?>");

    jQuery('html, body').animate({scrollTop:999999999}, 'slow');
});

</script>  
<?php
        echo '<label>Reply*</label>';
        echo form_textarea(array('name'=>'reply-'.$text_add_itens, 'rows'=>'3',     'class'=>'form-control tinymce'.$this->uri->segment(3), 'id'=>'reply'), 
                '');

?>

函數“ load_tinymce”：

function load_tinymce(where)
{
    tinymce.init({
        selector: where,
        theme: "modern",
        plugins: [
            "autolink lists link image hr anchor",
            "code",
            "media nonbreaking contextmenu directionality",
            ""
        ],
        toolbar1: "undo redo | bold italic underline bullist numlist outdent indent | link image",
        language: "pt_BR",
        document_base_url: url_base,
        relative_urls: true,  
        extended_valid_elements:"iframe[*],span[*],style[*]",
        content_css: url_base+"css/bootstrap.css",
        menubar:false,
        statusbar:false,
        forced_root_block : false,
    });         
}

我的警報“'它確實進入了這里..'”始終會以正確的ID觸發，但是在加載第二頁之后，文本編輯器不會加載到第一頁上。 這意味着只有最后加載的頁面有效。

更新：

執行更多測試后，我能夠觀察到它的行為是這樣的：

我有3條消息打開了回復表格。 我打開＃1消息並打開回復表單，文本編輯器被加載。 我打開＃2消息，然后加載了文本編輯器，一切都很好。

當我回到＃1，然后再次關閉並打開答復表單時，不會加載文本編輯器。 好。 因此它被覆蓋了嗎？

我打開＃3消息並打開回復表單，文本編輯器不再加載。

第二次打開回復表單后，沒有打開的任何表單都得到了文本編輯器，但是我可以關閉並打開我想要的第二個表單，它可以正常工作。

Answer 1

在不真正知道您怎么稱呼它的情況下，我可能會建議以下方法。 它首先檢查您的編輯器腳本是否已經加載（在本例中為jquery-ui），如果尚未加載。

加載后，它還會調用該函數以顯示對話框，如果單擊另一個元素（調用相同的函數），則不會重新加載，而直接直接調用“編輯器”，則加載函數將獲得div元素作為參數，然后將此參數添加到addEditorToScript函數中（在這種情況下，作為this對象）

更新資料

我進行了更新以使用tinymce。 該腳本應該放在您當前的jquery腳本所在的位置，div應該獲得一個click事件，並且至少要有一個唯一的id :)（它也可以是一個textarea），這對您有所幫助嗎？

 function loadMe(divElement) { console.log(divElement.innerHTML); if (divElement && divElement.innerHTML.indexOf('<i>Click to reply</i>')) { divElement.innerHTML = '... loading, please wait ...'; var callEditor = addEditorToScript.bind(divElement); if ($('#editorScript').length === 0) { console.log('loading jquery-ui'); var scriptTag = document.createElement('script'); scriptTag.id = 'editorScript'; scriptTag.src = 'http://tinymce.cachefly.net/4.1/tinymce.min.js'; $(scriptTag).on('load', callEditor); document.body.appendChild(scriptTag); return; } setTimeout(callEditor, 0); } } function addEditorToScript() { console.log(this); console.log(arguments); tinymce.init({ selector: '#' + this.id }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1>Lorem</h1> <p> Ipsum </p> <div id="editor1" onclick="loadMe(this)"> <i>Click to reply</i> </div> </div> <div> <h1>Delorem</h1> <p> Something </p> <div id="editor2" onclick="loadMe(this)"> <i>Click to reply</i> </div> </div>