Управление кнопкой mdl-js с динамическим внутренним изменениемHTML

Изменение <button> innerHTML, кажется, деактивирует эффект mdl-js-ripple. Используйте метод mentioned here для динамического создания нового элемента в качестве обходного пути или сообщения об этом как об ошибке?Управление кнопкой mdl-js с динамическим внутренним изменениемHTML

<body> 
    <button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE 
    </button> 
</body>

JS:

window.addEventListener("load",() => { 
    document.getElementById("myButton").innerHTML = "new value"; 

});

http://codepen.io/anon/pen/KVvMOE

Пробовал componentHandler.upgradeElement(button) на существующий элемент после установки нового HTML, но, как упоминалось в документации, это хорошо только для новых. Попытка повторного использования существующих элементов.

источник

2016-01-13 Bryan P

I Когда компонент анализируется и обновляется сценарием MDL, к внешнему узлу добавляется множество дополнительных атрибутов, а дополнительный HTML добавляется внутри. Это означает, что установка innerHTML удалит часть необходимой разметки внутри и что upgradeElement завершится с ошибкой из-за разметки, которая была добавлена во внешний узел.

Сначала вы должны сначала деактивировать кнопку componentHandler.downgradeElements, а затем установить innerHTML, а затем позвонить componentHandler.upgradeElement.

Некоторые непроверенный код образца:

function setText(element,newtext){ 
    componentHandler.downgradeElements(element); 
    element.innerHTML=newtext; 
    componentHandler.upgradeElement(element); 
} 
setText(document.getElementById('myButton'),'new value');

источник

2016-01-14 11:26:20 Matthew

Drown-grading it two, перед установкой innerHTML, похоже, по какой-то причине работает. теперь любопытно, почему один и тот же 'componentHandler.downgradeElements (element);' statement нужно повторить 2 раза. [новая версия] (http://codepen.io/anon/pen/bEoXPz) –

кажется, что нужно повторить понижение, дважды ушел с v1.1.1 –

Спасибо, он работает: https://jsfiddle.net/q08t7z17/18 / –

У меня аналогичная проблема. Я пытаюсь добавить некоторую карту через innerHtml на страницу. Карта содержит радиокнопку с использованием класса mdl-radio.

Все работает нормально, но переключатель не загружает стиль. Я вижу простую радиокнопку, а не стильную. Если я добавлю карту на страницу с самого начала, она будет выглядеть нормально, как и ожидалось.

Любые комментарии приветствуются, я не уверен, как это исправить.

 main.innerHTML = '<!-- CARD PREGUNTA-->\ 
    <div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet" style="margin: 0 auto; display: none;" id="pregunta_card">\ 
    <div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">\ 
    <!-- Contenido -->\ 
    <div class="mdl-card__supporting-text mdl-color-text--grey-600">\ 
    <h2 class="mdl-card__title-text" id="pregunta_card_title"></h2>\ 
    <br>\ 
    <br>\ 
    <!-- Radio Button 1 -->\ 
    <label id="opt1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1">\ 
    <input type="radio" id="option1" class="mdl-radio__button" name="options"/>\ 
    <!-- intitial state checked using attribute checked -->\ 
    <span class="mdl-radio__label" id="option1_value"></span>\ 
    </label>\ 
    </div>\ 
    </div>'

источник

2016-11-11 11:29:35 Lancelot

Управление кнопкой mdl-js с динамическим внутренним изменениемHTML

ответ

Смежные вопросы