ウィジェットがバックエンドに追加されたときにJavascriptを実行する

JavaScriptコントロールがアタッチされているウィジェットがあります。

ウィジェット管理ページのロード時にウィジェットが存在する場合、コントロールは正しく機能します。

新しいウィジェットを追加すると、それらは正しく機能せず、マークアップが表示されますが、javascriptイベントは有効になりません。

新しいウィジェットを保存すると、フォームがリロードされると、コントロールが正しく作成され、機能するようになります。

ページを更新すると、既存のウィジェットのみの問題も修正されます。新しいウィジェットにはまだこの問題があります。

具体的には、これらのポイントで選択入力に対してselectizeを実行しています。

• 文書準備完了
• Ajaxcomplete

必要に応じて各イベントでコードが実行されることを確認しましたが、結果は期待どおりではありません。

問題を実証するテストプラグインは次のとおりです。

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

変換できることがわかったすべての選択要素で増加するカウンターがあることがわかります。

ノート：

• ウィジェットページがロードされると、JSコンソールで期待どおりにカウンターが増加するのがわかります。
• 新しいウィジェットを追加すると、コードが実行されますが、found.lengthが0であることからわかるように、実行可能な選択要素の検索に失敗します。このタイプのすべての新しいウィジェットは、選択要素を持っている
• select要素にはそれらを識別するためのクラスがあり、selectizeライブラリが適用されると、このクラスは削除され、既存のウィジェットでの複製と再処理が防止されます。
• selectizeを使用する前に、同じ問題のあるSelect2を使用しました
• AJAXコードをコメントアウトすると、新しいウィジェットには標準の選択入力が含まれることになります。彼らはしない。なぜそうなのか分かりません

それでは、変更を行う前に保存を更新/クリックするようにユーザーに通知せずに、selectizeコントロールを機能させるにはどうすればよいですか？

素晴らしいニュース、

私はそれを修正しました。

私の最初のコメントであなたの要点を見失い、あなたがすでに実装した答えを与えてくれたことをおologiesびします。それは電車の中で私の電話で答えることを教えてくれます！

ajaxstopの使用は正しいです。JSの大部分は正しく動作しています。CSSスタイルが初期化され、DOMの変更が表示されます。

問題は、実際にはセレクターにあります。

これは、ウィジェットコンテンツがajaxを介して読み込まれないためです。実際、非表示の左側の列からクローンを作成し、次にajax呼び出しを起動してウィジェットの位置を右側の列に保存します。これは、ajaxstopがおもしろい動作をする理由を説明しています。ただし、左側の列にウィジェットの非表示バージョンがあるため、JSはそのインスタンスを作成しています。そのため、右側の列にドラッグすると、隠されたウィジェットのクローンが破損します。

したがって、左側の1つを選択する必要があります。以下は修正されたコードです。

<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がコメントしたように、よりクリーンなアプローチはそうすることです：

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

多くの場合、ページのロード時とウィジェットの更新時にもJSを実行する必要があります。このようにすることもできます。

function handle_widget_loading(){
   // your code to run
}
jQuery(document).ready( handle_widget_loading );
jQuery(document).on('widget-updated widget-added', handle_widget_loading );

答えとして参照するためにここに貼り付けるだけで、そのコメントを見つけるのがはるかに簡単です