为什么 HTML Button 不能与 jQuery Webpack 一起使用答案

【问题标题】：Why is HTML Button not working with jQuery Webpack为什么 HTML Button 不能与 jQuery Webpack 一起使用
【发布时间】：2019-09-29 02:57:41
【问题描述】：

我正在使用 webpack 来构建我的 HTML 和 javascript 文件。我在 index.js 中定义了一个函数我已经尝试过提到的解决方案here。但似乎没有一个适用于调用函数 onclick 按钮。

这是我的 HTML：

<section class="page-section bg-primary" id="airplanes">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8 text-center" id="funding-container">
          <h2 class="text-white mt-0">Send <span class="underlined"><span id="fundingPrice" class="underlined"></span> Ethers to Fund Airline Insurance</h2>
          <hr class="divider my-4">
          <button class="btn btn-light btn-xl" type="button" id="fundAirline">Fund Insurance</button>
          <hr class="divider my-4">
          <h2 class="text-white mt-0">Enter ETH Address to register new Airline</h2>
          <hr class="divider my-4">
          <div class="wrap-input100 bg1">
            <span class="label-input100">Ethereum Address *</span>
            <input class="input100" type="text" name="name" placeholder="0x00000000000000000000000000000000000000">
          </div>
          <button class="btn btn-light btn-xl" type="button" id="registerAirline">Register Airline</button>
        </div>
      </div>
    </div>
  </section>

这是我的 index.js 导入和函数：

import DOM from './dom';
import Contract from './contract';
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import './assets/css/creative.css';
import './assets/select2/select2.css';
import './assets/css/form.css';
import './assets/bootstrap/bootstrap.bundle.min.js';
import './assets/jquery-easing/jquery.easing.min.js';
import './assets/creative.js';

    DOM.elid('#registerAirline').addEventListener('click', async () => {
                const airline = $("#newAirline").val();
                if (airline) {
                    contract.registerAirline(airline, (error, result) => {
                        console.log(error, result);
                    });
                } else {
                    alert("You need to insert an airline address");
                }

            })

            $('#fundAirline').addEventListener('click', async () => {
                contract.fundAirline((error, result) => {
                    console.log(error, result);
                }) 
            })

【问题讨论】：

为什么你使用DOM.elid将事件监听器添加到registerAirline，但使用$将它添加到fundAirline？
当你运行代码时会发生什么？
@vlad-grigoryan 点击动画但不调用函数
@SagarAtalatti 你在控制台有什么错误吗？
@vlad-grigoryan 控制台中没有错误日志。

标签： javascript jquery html dom

【解决方案1】：

我尝试复制您的情况并添加了document.ready并将eventListener更改为.on('click'：

    $('#fundAirline').on('click', async () => {
        console.log("error, result");
     })
  });

你可以试试这个吗？控制台说什么？

【讨论】：

控制台日志中没有任何内容