0

Riot.js、Materialize.css、および jQuery を使用するプロジェクトに取り組んでいます (主に Materialize コンポーネントのため)。任意の要素に対して Riot.js を使用してイベント ハンドラーを作成しようとすると、起動時に Uncaught TypeError が発生し、その後 DOM が正しく更新されません。エラーを回避するために多くの方法を試しましたが、問題は解決しませんでした。問題が何であるかについての私の最善の推測は、Riot.js と jQuery (Materialize と一緒に?) が同時に 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>

ここに私のRecruiting-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>
4

3 に答える 3

0

列 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-09T03:44:37.387 に答える
0

これを使用できます：

e.stopPropagation();

完全なコード:

checkPlatform(e) {
  e.stopPropagation();
  if (e.currentTarget.value === 'PC') {
    this.regionDisabled = false;
  } else {
    this.regionDisabled = true;
  }
}
于 2016-11-18T01:30:53.297 に答える