WordPress 在後端新增小工具時執行 Javascript

問題描述

我有一些控制元件附有 javascript 控制元件。

如果視窗小工具出現在視窗小工具管理頁面載入時，控制元件正常工作。

當我新增一個新的小工具時，它們無法正常工作，我得到了標記，但沒有 javascript 事件生效。

如果我儲存新的小工具，當表單重新載入時，控制元件將被正確建立，現在可以正常工作。

重新整理頁面也會解決問題，但僅適用於現有的小工具。新的小工具還有這個問題。

具體來說，我在這些點上選擇輸入選擇：

檔案準備好了
Ajaxcomplete

我已經驗證了我的程式碼是按照需要在每個事件上執行的，但結果並不如預期。

這是一個測試外掛，演示了這個問題：

https://gist.github.com/Tarendai/8466299

你會看到我有一個計數器增加與每個選擇元素，它發現它可以轉換。

筆記：

當小工具頁面載入時，我可以按預期在 JS 控制檯中看到計數器增加
當我新增一個新的小工具時，程式碼是執行的，但是，找不到可以執行的任何 select 元素，如 found.length 為 0 所示。不應該是這樣，因為每一個新的 widget 都應該有一個選擇元素
選擇元素有一個類來標識它們，一旦應用選擇庫來防止重複，並且現有的小工具上的 re-processing 就會被刪除。
在使用 selectize 之前，我使用了 Select2，它有同樣的問題
註釋 AJAX 程式碼，我希望新的小工具具有標準的選擇輸入。他們不。我不知道為什麼會這樣

那麼如何使選擇控制工作沒有告訴使用者在進行更改之前重新整理/單擊儲存？

最佳解決方案

好訊息，

我已經修復了

抱歉，在我的初始評論中錯過你的想法，並給出你已經實施的答案。在火車上，我會教我在手機上回答

你使用 ajaxstop 是正確的。大多數情況下，JS 的地獄工作正常，您可以看到正在初始化的 css 樣式和 DOM 中的更改。

問題在於你的選擇器。

這是因為小工具內容沒有透過 ajax 載入，實際上它從隱藏的左側列中克隆，然後觸發 ajax 呼叫以將小工具的位置儲存在右側列中。這就解釋了為什麼 ajaxstop 工作，即使想到的內容被克隆。但是，由於左側欄中有一個隱藏版本的小工具，您的 JS 正在例項化。因此，當您將其拖動到右側列時，您將收到隱藏的小工具的破碎的克隆。

因此，您需要在左側選擇一個。以下是更正的程式碼：

<script>
jQuery( document ).ready( function( $ ) {
    function runSelect() {
        var found = $( '#widgets-right select.testselectize' );
        found.each( function( index, value ) {

            $( value ).selectize();
                .removeClass( 'testselectize' )
                .addClass( 'run-' + window.counter );

            console.log( $val );
            window.counter++;
        } );
    }

    window.counter = 1;

    runSelect();

    $( document ).ajaxStop( function() {
        runSelect();
    } );
} );
</script>

次佳解決方案

作為 @ aaron-holbrook 評論說，一個更清潔的方法將是：

<script>
$(document).on('widget-updated widget-added', function(){
    // your code to run
});
</script>

只是貼上在這裡作為參考，答案更容易找到這些評論

參考文獻

Executing Javascript When a Widget is Added in the Backend

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 在後端新增小工具時執行 Javascript