使用 Jquery 添加按钮和调用函数时在 HTML 中显式添加的区别答案

【问题标题】：Difference between using Jquery to add button, and explicitly adding it in HTML when calling functions使用 Jquery 添加按钮和调用函数时在 HTML 中显式添加的区别
【发布时间】：2020-10-11 01:40:31
【问题描述】：

我是 HTML/Javascript 的初学者，基本上不知道 Jquery。当我偶然发现一个问题时，我正在使用 npm 包、Jquery 和函数调用。

如果我使用 Jquery 添加一个按钮并附加一个点击功能，我可以在点击按钮后提醒用户一些事情。

如果我使用 HTML 添加另一个按钮，一旦单击该按钮，我将无法提醒用户注意相同的事情。

在使用 HTML 添加按钮时，我尝试了两种调用 alert() 函数的方法，但都没有成功，而 Jquery 按钮添加工作正常。

为什么会这样？以及如何使 HTML 明确定义的按钮与函数调用一起使用？

index.html 文件

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="bundle.js" charset="="utf-8""></script>
        <button onclick="fnClick()" id="my-button2">my-button2</button>
    </body>
</html>

app.js

var $ = require('jquery')
var curvematcher = require('curve-matcher')

const curve1 = [{x: 2, y: 1.5}, {x: 42222, y: 3444}];
const curve2 = [{x: 2, y: 1.5}, {x: 0, y: 0} ];


var button = $('<button/>').html('my-button1').on('click', function() {
    alert(curvematcher.shapeSimilarity(curve1, curve2))
})
$('body').append(button)

function fnClick() {
    alert(curvematcher.shapeSimilarity(curve1, curve2));
}

document.getElementById("my-button2").onclick = function () { alert(curvematcher.shapeSimilarity(curve1, curve2)); };

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

在附加 onclick 回调之前，您必须等待内容呈现（我建议您改用 addEventListener('click'）

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById("my-button2").addEventListener('click', function () {
    alert(curvematcher.shapeSimilarity(curve1, curve2));
  });
})

【讨论】：

我试过了，结果只是第一个按钮被移除了。尝试单击此按钮后，没有任何反应。我还尝试编辑按钮的 HTML 以不包含 onclick="fnClick()"
另外，为什么 Jquery 方法不需要在添加点击功能之前等待按钮加载？
显然javascript文件末尾有解析错误，是什么导致的错误？括号是否存在语法问题？
我建议您在 codepen.io 或 jsfiddle.net 中创建一个可共享的项目，这样可以更容易地理解您的问题并重现它。