Question

我正在开发一个使用Riot.js，Materialize.css和jQuery的项目（主要是因为Materialize组件）。当我尝试使用Riot.js为任何元素创建一个事件处理程序时，我在触发时得到一个Uncaught TypeError，之后DOM没有正确更新。我已经尝试了很多方法来解决错误，但没有解决问题。我最好的猜测问题是，不知怎的，Riot.js和jQuery（以及Materialize？）同时搞乱了DOM，导致同步问题。这已经困扰了我很长一段时间，并阻碍了网站的进展，所以非常感谢任何帮助！

Riot.js版本：2.5.0

Materialise.css版本：0.97.7

jQuery版本（由Materialise.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>

Answer 1

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

这指的是什么？看起来它正在尝试处理某个事件或其他事情，但它不属于某个功能。

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

中调用

Answer 2

你在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/

Answer 3

您可以使用：

e.stopPropagation();

完整代码：

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

Riot.js事件处理程序提供Uncaught TypeError并且DOM未正确更新

3 个答案: