事件侦听器未在 Chrome 中运行答案

【问题标题】：Event listener not running in Chrome事件侦听器未在 Chrome 中运行
【发布时间】：2019-01-02 18:08:00
【问题描述】：

我在使用 Chrome 时遇到问题。我试图创建一个按钮，在按下按钮时添加一个新的<input> 标签。现在，下面的代码在 Internet Explorer 上运行良好，但在 Chrome 中什么也没有发生。

我在控制台中也没有错误；该函数似乎没有运行。

我尝试将 $("#addto").append(input1); 替换为 alert("hello world");，只是为了查看代码是否运行，但它没有运行。

我也刚刚注意到，如果您将 JavaScript 放在 HTML 页面上的 <script> 标记中，这可以正常工作，但只有当它位于单独的 .js 文件中时，它才会起作用。

我的 Chrome 版本似乎无法正常工作。我已经下载了 Chrome Portable 并解决了这个问题。

window.onload = function() {
  var buttonElement = document.getElementById("addinput");

  if (buttonElement) {
    buttonElement.addEventListener('click', addinput);
  }

  function addinput() {
    var input1 = '<div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Name</span></div><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div>';
    
    $("#addto").append(input1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="modal-footer">
  <button id="addinput" type="button" class="btn btn-default">add</button>
</div>

【问题讨论】：

添加jQuery 和#addto 后，这对我来说很好。要进行编辑，html 中是否包含带有<script> 标签的单独文件？
"但是只有当它在一个单独的 js 文件中时它才会起作用。"您是否包含该文件？
@Jimenemex 是的，该文件位于脚本标签中。我知道它正在工作，因为正在调用其他函数来绘制一个显示的条形图。这也适用于 Internet Explorer。

标签： javascript jquery html google-chrome

【解决方案1】：

window.onload=function() {
  var buttonElement = document.getElementById("addinput");

  if (buttonElement) {
    buttonElement.addEventListener('click', addinput);
  }

  function addinput() {
    var input1 = '<div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Name</span></div><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div>';
    $("#addto").append(input1);
  }
}

 <div class="modal-footer">
        <button id="addinput" type="button" class="btn btn-default">add</button>
        <div id="addto"></div>
    </div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

您的代码确实有效

【讨论】：

我知道它可以，但仅在 Internet Explorer 中，或者如果 JavaScript 与
我已经用多个文件完成了测试...相同的结果embed.plnkr.co/yfdWyR6CUvMRO9MKvF3y
也许在浏览器的控制台上检查是个好主意，也许你的代码在本地发生了一些事情

【解决方案2】：

如果您不使用 Jquery，请确保在创建按钮元素后运行脚本。

如果你使用 jquery 替换 window.onload

$(function(){
 //Initial code goes here
});

或

$( document).ready( function(){
 //Initial code goes here
});

原因是因为 window.onload 会在旅途中运行脚本，甚至可能在创建按钮之前，使用 jquery 您必须等待文档完全加载才能使用元素

【讨论】：

这是错误的。 load 运行 DOMContentLoaded.
我都试过了，但这些都不起作用，它也没有解释为什么它在 IE 中有效，但在 chrome 中无效。

【解决方案3】：

其中一个解决方案将 js 文件放在关闭标记 </body> 第一个 jquery 文件之前，在你的之后，你可以删除 window.onload

index.html

<head>

</head>

<body>
    <div class="modal-footer">
        <button id="addinput" type="button" class="btn btn-default">add</button>
        <div id="addto"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <script src="./main.js">
    </script>
</body>

</html>

main.js

var buttonElement = document.getElementById("addinput");

if (buttonElement) {
    buttonElement.addEventListener('click', addinput);
}

function addinput() {
    var input1 = '<div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Name</span></div><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div>';
    $("#addto").append(input1);
}

【讨论】：

这似乎不起作用我仍然没有任何反应
您可能只是忘记在页面上添加选择器#addto？
这将工作，因为它与 html 在同一个文件中，问题是当 JS 在另一个 js 文件中时，它不能在 chrome 中工作，但可以在 internet explorer 中工作
@adamWadsworth 我更新了，当然工作正常，我确定你身边有问题（mb adblock 或其他）
你说得对，我的 chrome 上有些东西坏了，我下载了 chrome 便携版（干净的 chrome），它现在可以工作了。这浪费了我很多时间。谢谢您的帮助。我不知道是什么原因造成的，因为我已禁用所有扩展程序