Webpack 函数触发两次答案

【问题标题】：Webpack function fire twiceWebpack 函数触发两次
【发布时间】：2021-10-27 23:40:03
【问题描述】：

我有一个 html 页面，它使用 ajax 加载另一个 html 页面而不刷新页面，它似乎工作正常。这里的问题是，每当加载 ajax 页面时，它都会导致 for 中的 webpack 函数在调用时触发两次

HTML 代码

<html lang="en" class="page"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
  <link rel="stylesheet" href="index.css">
  <title>Document</title>

</head>
<body id="home" style="">
  <div id="homePage" class="home">
  <div class="reg">
        <i class="bx bxs-book-add"></i><span>Jobs</span>
      </div>

  </div>
<script src="./js/jquery.js"></script>
<script src="build.js"></script>
<script>
        $(".reg").click (function() {

          $.ajax({
                url: "jobs.html",
                success: function(data,status,jqXHR) {
                    $("#home").html($(data).filter(".main_body,script"));
                    history.pushState(null, null, "jobs.html");
                    
                }
            });    
        });
</script> 

</body></html>

第二个 HTML PAGE 和上面类似

<html lang="en" class="page"><head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
 <link rel="stylesheet" href="index.css">
 <title>Document</title>

</head>
<body id="home" style="">
 <div id="main_body" class="main_body">
 <div class="reg">
       <i class="bx bxs-book-add"></i><span>Home</span>
     </div>

 </div>
<script src="./js/jquery.js"></script>
<script src="build.js"></script>
<script>
       $(".reg").click (function() {

         $.ajax({
               url: "index.html",
               success: function(data,status,jqXHR) {
                   $("#home").html($(data).filter(".home,script"));
                   history.pushState(null, null, "/");

               }
           });    
       });
</script> 

</body></html>

webpack 索引 js 文件

async function getAccount() {
    const accounts = await ethereum.enable();
    const account = accounts[0];
    // do something with new account here
    
    numberLoadeds++;
    console.log("Time Called",numberLoadeds);

    console.log("Changed to",accounts[0]);
   
  }

ethereum.on('accountsChanged', function (accounts) {

    getAccount();

  });

webpack 配置文件

const path = require('path')

module.exports = {
    mode : 'development',
   entry: './client/index.js', // Our frontend will be inside the src folder
   output: {
      path: path.resolve(__dirname, 'public'),
      filename: 'build.js' // The final file will be created in dist/build.js

   },
 
   inject: false,
   devServer : {
    contentBase: path.join(__dirname,'public'),
    compress: true,
    port:8085
   }
   
}

我怀疑的是，只要调用 ajax 函数来更改页面，这些函数就会重复，但我不知道如何证明或识别问题。真的需要帮助谢谢

【问题讨论】：

标签： javascript html jquery css webpack

【解决方案1】：

问题与 html 文件有关。当调用 jquery ajax 函数时，它会发送 div 元素和不带 script 标签的脚本。当发送到浏览器时，它无法解释发送的脚本。 Jquery 然后告诉浏览器评估发送的脚本导致重复。

解决方案其实就是将script标签移到header中，从ajax请求发送的数据中去掉script过滤器。

【讨论】：