首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Webpack函数触发两次

问Webpack函数触发两次
EN

Stack Overflow用户
提问于 2021-08-28 10:27:59
回答 1查看 24关注 0票数 0

我有一个/a html页面,它使用ajax加载另一个html页面,而不需要刷新页面,而且它似乎工作得很好。这里的问题是,每当加载ajax页面时,当调用两次for函数时,它都会导致for fire中的webpack函数

HTML代码

代码语言:javascript
复制
<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页面与上面的类似

代码语言:javascript
复制
<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文件

代码语言:javascript
复制
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配置文件

代码语言:javascript
复制
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函数来更改页面时,这些函数都会重复,但我不知道如何证明或识别这个问题。真的很需要帮助谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-03 14:51:18

此问题与html文件相关。当jquery ajax函数被调用时,它发送div元素和不带script标记的脚本。当发送到浏览器时,它无法解释发送的脚本。然后,Jquery告诉浏览器对发送的脚本求值,导致重复。

解决方案实际上是将脚本标记移动到头部,并从ajax请求发送的数据中删除脚本过滤器。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68963450

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档