在JS中不使用onclick函数的onclick事件侦听器

onClick eventlistener in JS without using onclick function in HTML

本文关键字：onclick 函数 事件 侦听器 JS      更新时间：2023-09-26

我有一个html文件和js文件，我想在html中单击按钮时执行JS。 为此，我可以在 html 中使用 onclick 事件，但条件是我不应该修改 HTML 文件。

我尝试在我的 JS 中添加事件侦听器，但这不起作用。

<p align=center>
    <button class="stdbutton" id=button2 name=button2>
        Click Me
    </button>
</p>

$("button2").click(function() {
    alert("button2 clicked");
});

请参阅小提琴链接以获取更多参考：http://jsfiddle.net/gqpr0g9w/

提前致谢

试试小提琴，

基本上你的小提琴的第一个问题是你正在使用jquery以外的js库。如果不引用 jquery 库，Jquery 代码将无法执行。

其次，您使用的是无效的选择器， 

$("button2")

您可以根据您的标记将其替换为基于 ID 的选择器（# 选择器）

$("#button2")

最后尝试将代码包装在 jquery 闭包下 document ready event 这将确保在浏览器上加载相关对象时附加事件。

最后意志变成

$(document).ready(function() {
  $("#button2").click(function() {
    alert("button2 clicked");
  });
});

希望它对你有用..

在你的 jsfiddle 中包含 jQuery。使用以下方法之一附加事件侦听器，以便使用 jQuery 进行单击

。 
$("#button2").on("click", function() {
   alert("button 2 clicked");
});

或

$("#button2").click(function() {
   alert("button2 clicked");
});

情况 jQuery 包含在 html 中：JS 文件 -

$("#button2").click(function() {
    alert("button2 clicked");
});

注意单词"button2"前面的#符号，表示我们正在寻找一个ID

案例 jQuery 不包含在 html 中：

<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>

必须首先包含 jQuery 脚本 然后，您可以执行与上面所示相同的代码。

好吧，你正在尝试使用jQuery，但你的html文件没有包含jQuery。实际上，您的html中根本没有包含任何脚本，例如 

<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>

我认为如果不修改 html 文件，您将无法做到这一点。

相关文章：