Question

我正在使用Mutation Observer来收听新添加的元素，并且它适用于所有元素，但对于Switchery jQuery插件却没有，因为Switchery通过[document.querySelector]获取元素

这是我的代码......

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

感谢您的帮助。

Answer 1

似乎Switchery不是jQuery插件。这就是GitHub中的示例代码使用document.querySelector获取要应用它的元素的原因。

使用jQuery查找元素时，需要使用jQuery。each以便为Switchery处理每个DOM元素。

以下是通过jQuery查找元素并将Switchery应用于每个元素的示例。因此，在代码中sw_current = $(this).find('.switchery-element');之后执行类似的操作。

	$(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>

Mutation Observer动态元素中的等效document.querySelector

1 个答案: