Switchery、Select2、wpColorPickerを動的に実行する

Question

小さなワードプレスで作業していますが、Switchery,Select2、uploadMedia、wpColorPickerのようなjQueryコントロールを持つリピーターがあります。

一度アップロードメディアのようなJSファイル内の各コントロールのイベントハンドラを実行する方法はありますが、

$('body').on('click', 'a.btn_media_upload', function (e) { }); 

すべてのjQueryのコントロールが必要なこの行ですべての新しいコントロールのために一度にそれをバインドすることは非常に簡単でしたインライン一度それぞれのスクリプトと私はそれは良くないことだと思うし、私は新しい方法MutationObserverを使用しようとするが、残念ながら私はそれを使用することができなかった、私はDOMNodeInsertedをテストするが、それは動作しませんでしたし、私はそれがdeprecatedだ読ん:)

感謝あなたの助けに！

Answer 1

Mutation Observerとunderscore.jsライブラリとの最適なソリューションが、それでもSwitchery plugin

jQuery(document).ready(function($){ 

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 

var observerjQueryPlugins = function (repeaterWrapper) { 

    _.each(repeaterWrapper, function (repeaterItem, index) { 

     var jq_nodes = $(repeaterItem.addedNodes); 

     jq_nodes.each(function() { 

      // Color Picker 
      $(this).find('.element-wrapper.element-wpcolor .color-picker').wpColorPicker(); 

      // Date Picker 
      datePickerControl = $(this).find('.element-wrapper.element-datepicker .datepicker'); 
      datePickerDateFormat = datePickerControl.data('date-format'); // 'mm dd, yy' 

      datePickerControl.datepicker({ 
       dateFormat: datePickerDateFormat, 
       showAnim: "slideDown", 
       changeMonth: true, 
       numberOfMonths: 1 
      }); 

      // Select 2 
      $(this).find('.xx-select2').select2({ 
       theme: "classic" 
      }); 

     }); 
    }); 

} 

new MutationObserver(observerjQueryPlugins).observe(document.body, { 
    childList: true, 
    subtree: true, 
    attributes: false, 
    characterData: false 
}); 

}); 

ための助けが必要