时间戳

首页 > 解决方案 > 我重构的香草 JS 按钮单击不起作用

javascript - 我重构的香草 JS 按钮单击不起作用

问题描述

我正在将 jQuery web sdk 重构为 vanilla JavaScript 。

原始的 jQuery 文件有一个按钮单击，如下所示：

sdk.initialize().then(function() {
  $('#loginButton').click(function() {
    // more logic in here
  });
});

我像这样开始我的重构：

sdk.initialize().then(() => {
  document.querySelector('#loginButton').addEventListener('click', (event) => {
    event.preventDefault();
    console.log('you clicked me!');
  });
});

如果代码看起来正确，则可能是范围问题，因为这是在 RequireJS 内部，如下所示：

require(['XmSdk', 'XmUIHandler'], (xm, xmui) => {
  const sdk = XmSdk();
  // the above code resides in here
});

当我单击按钮时，我没有得到任何输出，也没有错误。

我什至试过这个：

sdk.initialize().then(() => {
  console.log('initialized!');
}).catch((err) => {
  console.log('Failed to initialize');
});

我没有输出，也没有错误。

标签： javascriptjqueryrequirejs

解决方案

尝试使用函数，而不是事件处理程序上的箭头函数

sdk.initialize().then(() => {
  document.querySelector('#loginButton').addEventListener('click', function(event){
    event.preventDefault();
    console.log('you clicked me!');
  });
});

推荐阅读