Question

我在Rails应用程序中的vanilla HTML5页面上有webpack。

我已经在Webpack中定义了$(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()

当我用{{1}}执行它时，它完美无缺！

如何在单击元素时触发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');
  }
});

document.getElementById（）。onClick（）在点击时不触发

2 个答案: