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

Question

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

我已经onClick在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(),它完美地工作!

如何在单击元素时触发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方法.