使用 .on 事件侦听器更改颜色

Question

为什么此代码不起作用？

html

    <!DOCTYPE html>
<html>
<head>
    <title>Ending Project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="events.js"></script>
</head>
<body>
    <input type="button" value="Click">
    <h1>Changing</h1>
</body>

</html>

Javascript代码：

    $("input").on("click" , function(){
    $("h1").css("background-color" , "black");
});

我试图在单击按钮时更改背景颜色但它不起作用，我正在按照文档中的说明进行操作！

Answer 1

您需要使用输入 select 或使用 html 标签按钮 select 元素

//If using input type button then use input selector
$("input[type='button']").on("click", function() {
  $("h1").css("background-color", "black");
});

// or use button selector 
$("button").on("click", function() {
  $("h1").css("background-color", "green");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Click">
<h1>Changing</h1>


<button type="button" value="Click">Button</button>
<h1>New Button</h1>

Answer 2

从我的角度来看，它有 2 个选项，我不知道哪个是最好的。

首先，正如它所说 "dfsq" 将您的代码放入函数中

<input type="button" value="Click">
<h1>Changing</h1>
<script type="text/javascript">
    $(function () {
        $("input").on("click", function () {
            $("h1").css("background-color", "black");
        });
    });
</script>

或者第二个创建一个函数并从输入中调用它

<input type="button" onclick="changeColor()" value="Click">
<h1>Changing</h1>
<script type="text/javascript">
    function changeColor(){
        $("h1").css("background-color", "black");
    }
</script>

Answer 3

这应该有效

   <!DOCTYPE html>
<html>
<head>
    <title>Ending Project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <input type="button" value="Click">
    <h1>Changing</h1>
    <script src="./events.js"></script>

</body>

将脚本标记放在主体的末尾本质上是在运行脚本之前等待 DOM 加载。我就是这样做的。仅供参考，在现代浏览器中有 defer 所以下面的也可以工作

   <!DOCTYPE html>
<html>
<head>
    <title>Ending Project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="./events.js" defer></script>
</head>
<body>
    <input type="button" value="Click">
    <h1>Changing</h1>

</body>

使用 .on 事件侦听器更改颜色

Changing color using .on Event Listener

html

javascript

jquery

jquery-events