在动态新元素中运行Switchery、Select2和wpColorPicker jQuery插件

Question

我正在开发一个小型wordpress插件，它有一个中继器，它有一些jQuery控件，如开心果、Select2、uploadMedia和wpColorPicker。

是否有一种方法可以在js文件(如Upload Media )中一次为每个控件运行事件处理程序，可以很容易地为所有新控件绑定一次

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

所有jQuery控件都需要为每个控件提供一个内联脚本，我认为它不是很好，我测试了DOMNodeInserted，但它没有工作，我读取了它的已弃用，然后我尝试使用新的方式MutationObserver，但不幸的是我没有使用它:)

谢谢你的帮忙!

Answer 1

使用突变观察者和underscore.js库的最佳解决方案，但仍然需要对开关插件的帮助

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

});