Реализация MutationObserver вместо DOMSubtreeModified

У меня есть select[multiple], которому я дал класс custom-multiselect на своей странице, для которого я перехватываю событие DOMSubtreeModified следующим образом:

HTML:

<select class="custom-multiselect"></select>

JQuery:

$('.custom-multiselect').each(function (i, select) {
    var sel = this;
    adjustHeight(sel); //Custom function
    //Binding DOMSubtreeModified to catch if the select list gets modified by the user
    $(sel).on('DOMSubtreeModified', function () {            
        adjustHeight(sel);
    });
    //For Internet Explorer
    $(sel).on('propertychange', function () {
        adjustHeight(sel);
    });
});

Этот подход работает безупречно. Я хочу преобразовать функцию DOMSubtreeModified в MutationObserver, так как DOMSubtreeModified обесценивается.

Итак, я сделал что-то вроде этого:

var observer = new MutationObserver(function (mutation) {
    mutation.forEach(function (m) {
        if (m.type == 'subtree') {
            adjustHeight(this);//Can I use m.target here?
        }
    });
});
observer.observe(document.querySelector('select.custom-multiselect'), {
    subtree: true
});

Но в итоге получаю ошибку

TypeError: выражение не может быть преобразовано для возврата указанного типа.

Как я могу преобразовать мое событие DOMSubtreeModified для наблюдения MutationObserver?


javascript jquery dom mutation-observers
person progrAmmar    schedule 01.02.2017    source источник
comment
this в adjustHeight наверняка не будет тем, что вы хотите - вы пробовали m.target?   -  person Jaromanda X    schedule 01.02.2017
comment
Я сделал, но я получаю вышеупомянутую ошибку, она не дает мне знать, работает ли m.target или нет :-S   -  person progrAmmar    schedule 01.02.2017
comment
Хорошо, прочтите документацию - в самом начале по крайней мере, для параметра childList, атрибутов или characterData должно быть задано значение true. В противном случае выдается сообщение Недопустимая или недопустимая строка была указана ошибка - также нет мутации .type == "subtree" - я удивлен, что ваш код доходит до того, что вы утверждаете - о, я вижу, эта ошибка связана с тем, что вы не установите хотя бы один из childList, attributes или characterData в значение true...   -  person Jaromanda X    schedule 01.02.2017
comment
Спасибо, я нашел .type == 'subtree' с другого форума, думал, что это работает, поэтому я попытался. На данный момент он не работает с MutationObserver, он работает с функцией DOMSubtreeModified.   -  person progrAmmar    schedule 01.02.2017
comment
вам понадобится type == 'childList и добавьте childList: true к .observe параметрам   -  person Jaromanda X    schedule 01.02.2017
comment
@JaromandaX Спасибо за ваш комментарий об обязательных атрибутах. Вы спасли мой день!   -  person raphael75    schedule 26.09.2019

Ответы (1)


arrow_upward
9
arrow_downward

  • Поместите код вместо старого события DOM и используйте переменную sel в качестве цели наблюдения;
  • Используйте опцию childList в MutationObserver, потому что subtree не указывает, что искать;
  • Нет необходимости проверять мутации, поскольку вы подписываетесь только на один тип.

$('.custom-multiselect').each(function() {
    var sel = this;
    adjustHeight(sel);

    new MutationObserver(function() {
        adjustHeight(sel);
    }).observe(sel, {childList: true, subtree: true});
});

Or, if you like .bind for some reason:

new MutationObserver(adjustHeight.bind(null, sel))
    .observe(sel, {childList: true, subtree: true});
person wOxxOm    schedule 01.02.2017