document.getElementById().onClick() 没有在点击时触发

Question

我的 Rails 应用程序中的普通 HTML5 页面上有 webpack。

我在 Webpack 中定义了 onClick 处理程序：

$(document).ready(()=> {
  document.getElementById('add-card').onClick = () => {
    $('.ui.modal').modal('show');
  }
});

按钮在页面上呈现为：

<a class="ui button" id="add-card">Click me</a>

点击它什么也不做。但是，在控制台中，我可以看到处理程序已定义：

document.getElementById('add-card').onClick
ƒ () {
    $('.ui.modal').modal('show');
  }

当我使用document.getElementById('add-card').onClick() 执行它时，它运行良好！

如何让我的 onClick 处理程序在元素被点击时触发？

编辑：对于挑剔的观察者，我已经通过 Webpack 正确安装和配置了 jQuery。

Answer 1

您正在混合香草 js 和 jquery。你可以这样做

$(document).ready(()=> {
    document.getElementById('add-card').addEventListener('click', () => {
        $('.ui.modal').modal('show');
    })
});

或者你可以这样做

$(document).ready(()=> {
    $('#add-card').on('click', () => {
        $('.ui.modal').modal('show');
    });
});

当您执行document.getElementById('add-card') 时，您会返回一个Node，而不是一个jQuery 对象，因此没有onClick（虽然有onclick，但最好使用addEventListener）。如果你执行$('#add-card')，你会得到一个 jQuery 对象，所以你可以在它上面使用 jQuery 方法。

Answer 2

将onClick 替换为onclick：

$(document).ready(()=> {
  document.getElementById('add-card').onclick = () => {
    $('.ui.modal').modal('show');
  }
});