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>

这是我的招聘-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

您在 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-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 回答
0 
checkPlatform(e) {
  if (e.currentTarget.value === 'PC') {
    this.regionDisabled = false;
  } else {
    this.regionDisabled = true;
  }
}

这是指什么？看起来它正在尝试处理事件或其他东西，但它不在函数中。

看起来它正在尝试修改 DOM，但尚未初始化。您应该将此部分移动到on('mount')或从内部调用它on('mount')

于 2016-08-29T08:14:03.747 回答