Обработчик событий Riot.js дает Uncaught TypeError и DOM неправильно обновляется

Я работаю над проектом, который использует Riot.js, Materialize.css и jQuery (главным образом из-за компонентов Materialize). Когда я пытаюсь сделать обработчик события, используя Riot.js для любого элемента, я получаю Uncaught TypeError при запуске, и DOM не обновляется правильно после этого. Я пробовал много способов обойти ошибку, но ничто не решило проблему. Мое лучшее предположение о том, что проблема в том, что каким-то образом Riot.js и jQuery (наряду с материализацией?) Воюют с DOM в то же время, что вызывает проблемы синхронизации. Это уже давно подтачивало меня и препятствовало прогрессу на сайте, поэтому любая помощь очень ценится!Обработчик событий Riot.js дает Uncaught TypeError и DOM неправильно обновляется

Riot.js версия: 2.5.0

версия Materialize.css: 0.97.7

JQuery версии (предоставляется Materialize.css): 2.1.4

Вот трассировки стека выход на консоли Chrome:

jquery.js:4769 Uncaught TypeError: Cannot read property 'nodeType' of undefined 
    handlers    @ jquery.js:4769 
    dispatch    @ jquery.js:4718 
    elemData.handle  @ jquery.js:4549 
    trigger    @ jquery.js:7807 
    (anonymous function) @ jquery.js:7875 
    each     @ jquery.js:365 
    each     @ jquery.js:137 
    trigger    @ jquery.js:7874 
    (anonymous function) @ materialize.js:3191 
    dispatch    @ jquery.js:4737 
    elemData.handle  @ jquery.js:4549

Вот мой index.html (урезанный к соответствующей информации):

<!doctype html> 

    <head> 
    <link rel="stylesheet" href="/materialize/css/materialize.min.css"> 
    </head> 

    <body> 

    <div class="container"> 
     <div class="section"> 
     <div class="row"> 
      <div class="col s12 m6"> 
      <recruiting-form></recruiting-form> 
      </div> 
     </div> 
     </div> 
    </div> 

    <script src="/riot/riot+compiler.min.js"></script> 
    <script type="riot/tag" src="recruiting-form.tag"></script> 

    <script src="/jquery/jquery.js"></script> 
    <script src="/materialize/js/materialize.js"></script> 

    <script> 
     $(document).ready(function() { 
     riot.mount('*'); 
     }); 
    </script> 

    </body> 

</html>

Вот мой рекрутинг-form.tag (урезанная к соответствующей информации):

<recruiting-form> 

    <div class="row"> 
    <form class="col s12> 
     <div class="row"> 

     <div class="input-field col s6"> 
      <select onchange={ checkPlatform }> 
      <option value="" disabled selected>Choose your platform</option> 
      <option value="PC">PC</option> 
      <option value="PS4">PlayStation 4</option> 
      <option value="XB1">Xbox One</option> 
      </select> 
      <label>Platform</label> 
     </div> 

     <div class="input-field col s6"> 
      <select disabled={ regionDisabled }> 
      <option value="" disabled selected>Choose your region</option> 
      <option value="US">Americas</option> 
      <option value="EU">Europe</option> 
      <option value="KR">Asia</option> 
      </select> 
      <label>Region</label> 
     </div> 

     </div> 
    </form> 
    </div> 

    <script> 
    this.regionDisabled = true; 

    checkPlatform(e) { 
     if (e.currentTarget.value === 'PC') { 
     this.regionDisabled = false; 
     } else { 
     this.regionDisabled = true; 
     } 
    } 

    this.on('mount', function() { 
     $('select').material_select(); 
    }); 
    </script> 

</recruiting-form>

источник

2016-08-29 Adam Grieger

checkPlatform(e) { 
    if (e.currentTarget.value === 'PC') { 
    this.regionDisabled = false; 
    } else { 
    this.regionDisabled = true; 
    } 
}

Что это в виду? Похоже, он пытается обработать событие или что-то в этом роде, но это не функция.

Похоже, что он пытается изменить DOM, но он еще не инициализирован. Вы должны переместить этот раздел в on('mount') или вызвать его из в on('mount')

источник

2016-08-29 08:14:03 user1278519

Это обработчик события, и вот как Riot.js сказал, чтобы написать их. Проблема с помещением этого обработчика событий в 'on ('mount')' заключается в том, что я не могу получить событие, чтобы найти 'checkPlatform'. Это по той же причине, почему у меня есть 'this.regionDisabled = true;' вне 'on ('mount')'. Я помещал предупреждения внутри обработчика события checkPlatform для тестирования, и я ничего не получал. –

О, извините, это действительно стандартная форма riotjs. Я думаю, что столкнулся с некоторыми проблемами, поэтому я использую «нормальную» функцию 'this.myFunction = function..' для создания локально ограниченной функции. – user1278519

Вы недостающий "в Col s12, измените его на

<div class="row"> 
    <form class="col s12"> 
     <div class="row">

Кроме того, добавить этот код, чтобы применить материал после обновления

this.on('update', function() { 
    $('select').material_select(); 
});

Вот это рабочая скрипку https://jsfiddle.net/vitomd/Lm4dy21d/1/

источник

2016-09-09 03:44:37 vitomd

Вы можете использовать это:

e.stopPropagation();

Полный код:

checkPlatform(e) { 
    e.stopPropagation(); 
    if (e.currentTarget.value === 'PC') { 
    this.regionDisabled = false; 
    } else { 
    this.regionDisabled = true; 
    } 
}

источник

2016-11-18 01:30:53 tokyo59

Обработчик событий Riot.js дает Uncaught TypeError и DOM неправильно обновляется

ответ

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