Cfrgtkky

I'm using Mutation Observer to listen to the new added elements and it's working fine for all elements but for Switchery jQuery Plugin it doesn't because Switchery get element by [document.querySelector]

This is my code...

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 (Working Good)

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



        // Switchery using document.querySelector and i need to know the

        // equivalent way to do it inside this loop .. like that



        // Of course this code is WRONG

        sw_current = $(this).find('.switchery-element');



        var switchery = new Switchery( sw_current, {

                disabled: false,

                size: '',

                color: '#8ce196',

                secondaryColor: '#ddd',

                jackColor: '#fff',

                jackSecondaryColor: '#fff'

        });



    });

});



}



new MutationObserver(observerjQueryPlugins).observe(document.body, {

    childList: true,

    subtree: true,

    attributes: false,

    characterData: false

});

Thanks for your help.

It seems that Switchery is not a jQuery Plugin. That's why the sample code in GitHub uses document.querySelector to acquire element to apply it.

As you use jQuery to find elements, you need to use jQuery.each in order to process every DOM element for Switchery.

The following is an example to find element by jQuery and apply Switchery to each element. so, do the similar thing after sw_current = $(this).find('.switchery-element'); in your code.

	$(function() {

        sw_current = $(this).find('.switchery-element');

        sw_current.each(function() {

	        var switchery = new Switchery(this);

        })



    });

@import url("http://abpetkov.github.io/switchery/dist/switchery.min.css");

<input type="checkbox" class="switchery-element" checked />Check 1

<p/>

<input type="checkbox" class="switchery-element" checked />Check 2

<p/>

<input type="checkbox" class="switchery-element" checked />Check 3



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://abpetkov.github.io/switchery/dist/switchery.min.js"></script>