1. 首页
  2. 问题列表
  3. 如何使JavaScript在ajax请求更新HTML后运行
提问者：小点点

如何使JavaScript在ajax请求更新HTML后运行


我的代码涉及到使用jQuery的Ajax获取一些数据。 然后，我将从服务器获得的结果附加到html（以按钮的形式）。 所有按钮都有一个类名MyButton。 单独的JavaScript文件处理按钮单击事件。 第一次Ajax调用时一切正常，但第二次Ajax调用时出现错误。 Ajax调用按一定时间间隔进行

HTML代码

 <button class="mybutton">Button 1</button>

Script1.js文件中的Javascript代码

document.addEventListener("DOMContentLoaded", ready);

function ready() {
  let buttons = document.querySelectorAll(".mybutton");
  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      //do some stuff
      console.log("I was Clicked");
    });
  });
}

Script2.js文件中的jQuery代码

$(document).ready(() => {
  //append the html  to add more buttons after some time
  setInterval(() => {
    $.ajax({
      method: "GET",
      url: "/getButtons",
      async: true,
      success: function (data, status, xhr) {
        data.forEach((item) => {
          $("body").append(
            '<button class="mybutton">' + item + "</button>"
          );
        });
        const scriptsrc = document.createElement("script");
        scriptsrc.setAttribute("type", "text/javascript");
        scriptsrc.setAttribute("src", "//script location here");

        $("head").append(scriptsrc);
      },
    });
  }, 10000);
});

附加到按钮上的JavaScript只在第一个Ajax请求之后触发一次，第二次时出现错误:

Uncaught SyntaxError: Identifier 'buttons' has already been declared

共2个答案

匿名用户

这段代码看起来有点混乱，有几个错误。

scriptsrc.setAttribute('src', ''); //script location? 
_r = '+Math.random()+Math.pow(10,10).toString(2)); Not sure what this part does

请检查此fiddle以减少错误:https://jsfiddle.net/p1x9vnj2/

匿名用户

你能用下面的脚本试试吗？ 以澄清是发出了'let buttons'，还是ready（）函数覆盖了现有函数。

document.addEventListener("DOMContentLoaded", init_fun);

function init_fun() {
  document.querySelectorAll(".mybutton").forEach((button) => {
    button.addEventListener("click", () => {
      //do some stuff
      console.log("I was Clicked");
    });
  });
}

在本例中，如果您在ajax调用之后注入script1，您将有多个script标记，其中包含多个具有相同名称的变量。

不是添加整个脚本，而是在ajax调用的成功回调后调用函数。 这样可以避免多个可变的问题。

相关问题