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

Question

我正在开发一个带有转发器的小型 wordpress 插件，其中有一些 jQuery 控件，例如 Switchery, Select2、uploadMedia 和 wpColorPicker。

有没有办法在 js 文件中为每个控件运行一次事件处理程序，如上传媒体，使用此行为所有新控件绑定一次非常容易

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

所有 jQuery 控件都需要一个内联脚本，我认为这不好，我测试了 DOMNodeInserted 但它不起作用，我读到它是 deprecated, Then i try to use the new way MutationObserver 但不幸的是我没有使用它:)

感谢您的帮助！

Answer 1

Mutation Observer and underscore.js library BUT still need help for 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
});

});

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

Run Switchery, Select2 and wpColorPicker jQuery plugins in dynamically new elements

wordpress

jquery

jquery-plugins