在动态新元素中运行Switchery，Select2和wpColorPicker jQuery插件(Run Switchery, Select2 and wpColorPicker jQuery plugins in dynamically new elements)

我正在研究一个小小的wordpress插件有一个转发器，它有一些jQuery控件，如Switchery ， Select2 ，uploadMedia和wpColorPicker。

有没有办法在像上传媒体这样的js文件中为每个控件运行一次事件处理程序，使用这一行很容易为所有新控件绑定一次

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

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

谢谢你的帮助！

I'm working on a tiny wordpress plugin has a repeater which has some jQuery controls like Switchery, Select2, uploadMedia and wpColorPicker.

Is there a way to run event handlers for each control once in js file like Upload Media, it was very easy to bind it once for all new controls with this line

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

All jQuery controls need an inline script for each once and i think it's not good, I test DOMNodeInserted but it didn't work and i read it's deprecated, Then i try to use the new way MutationObserver but unfortunately i failed to use it :)

Thanks for your help!

最满意答案

Mutation Observer和underscore.js库的最佳解决方案但仍需要Switchery插件的帮助

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

Best Solution with 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控件，如Switchery ， Select2 ，uploadMedia和wpColorPicker。

有没有办法在像上传媒体这样的js文件中为每个控件运行一次事件处理程序，使用这一行很容易为所有新控件绑定一次

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

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

谢谢你的帮助！

I'm working on a tiny wordpress plugin has a repeater which has some jQuery controls like Switchery, Select2, uploadMedia and wpColorPicker.

Is there a way to run event handlers for each control once in js file like Upload Media, it was very easy to bind it once for all new controls with this line

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

All jQuery controls need an inline script for each once and i think it's not good, I test DOMNodeInserted but it didn't work and i read it's deprecated, Then i try to use the new way MutationObserver but unfortunately i failed to use it :)

Thanks for your help!

最满意答案

Mutation Observer和underscore.js库的最佳解决方案但仍需要Switchery插件的帮助

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

Best Solution with 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 }); });