Javascript on ("click") not working

Javascript on ("click") not working

本文关键字：quot not working click Javascript on      更新时间：2023-09-26

由于某种原因，我的JS点击不工作。我有id和类标记。

<!DOCTYPE html>
<head>
   <link rel="stylesheet" type="text/css" href="css/style.css">
   <script type='text/javascript' src="js/index.js"></script>
   <script>
       $(document).ready(function(){
         alert("Hello World");
       });
   </script>
</head>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

这是Javascript。

  $(document).ready(function() {
     // Only change code below this line.
     $("#getMessage").on("click", function(){
         $(".message").html("Get message");
     });
     // Only change code above this line.
  });

我真的很感激你的真知灼见!非常感谢。我的假设是index.js文件没有正确链接，但src绝对是正确的。

$(document).ready(function() {
   
    $("#getMessage").on("click", function(){
      alert('You Clicked..!!');
    });
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

您忘记包含脚本，如果没有，您可能会错过对齐脚本文件，请先加载它

如果你打算使用某个库的功能——在这个例子中是jQuery——那么你必须在使用它的任何功能之前加载这个库。

$(document).on("click", "#getMessage", function(){
      $(".message").html("Get message");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

您可能缺少jQuery脚本文件。这对我来说很合适。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            alert("Hello World");
        });
        $(document).ready(function () {
            $("#getMessage").on("click", function () {
                $(".message").html("Get message");
            });
        });
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row text-center">
            <h2>Cat Photo Finder</h2>
        </div>
        <div class="row text-center">
            <div class="col-xs-12 well message">
                The message will go here
            </div>
        </div>
        <div class="row text-center">
            <div class="col-xs-12">
                <button id="getMessage" class="btn btn-primary">
                    Get Message
                </button>
            </div>
        </div>
    </div>
</body>
</html>

相关文章：