将带有动态导入的jquery代码转换为纯js时出现问题

dddzy1tm  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(148)

我必须遵守以下工作守则:

$('form:not(.contact-form__items)').on('submit', event => {
  event.preventDefault();
  import('./modules/adding-products-to-basket.js')
  .then(module => {
    module.AddingProductsToBasket.addProductToBasket(event);
  });
});

共有四种产品,每种产品都有自己的形式,用于将产品添加到篮子中。提交表单后,将加载一个模块,该模块负责向购物篮中添加产品。我想我所要做的就是:

const addToBasketForms = document.querySelectorAll('form:not(.contact-form__items)');
for (const form of addToBasketForms) {
  form.addEventListener('submit', event => {
    import('./modules/adding-products-to-basket.js')
    .then(module => {
      module.AddingProductsToBasket.addProductToBasket(event);
    });
  });
}

但它未能将产品加入到篮子中。
我没有在控制台中得到任何错误,但问题似乎是 event.currentTarget 当我尝试将其登录到内部时,它为null then() 在纯js版本中。在jquery版本中,我可以登录 event.currentTarget ,这是提交的表格。
这是使用ajax调用将产品添加到篮子中的方法(我希望将其保留为jquery代码)。如你所见,我需要 event.currentTarget 因此,该方法知道要处理哪个表单。

export const AddingProductsToBasket = {

  addProductToBasket (event) {
    $.ajax({
      url: 'basket',
      method: 'POST',
      data: $(event.currentTarget).serialize(),
      dataType: 'text',
      success: function(response) {
        // some code
      }
   });
 }

}

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题