Question

出于某种原因，我点击的JS无效。我有id和class标记。

<!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肯定是正确的。

Answer 1

＆＃13;

shouldComponentUpdate

＆＃13;

$(document).ready(function() {
   
    $("#getMessage").on("click", function(){
      alert('You Clicked..!!');
    });
    
  });

＆＃13;

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

Answer 2

如果您打算使用某个库的功能 - 在这种情况下为jQuery - 那么您必须在使用其任何功能之前加载此库。

＆＃13;

$(document).on("click", "#getMessage", function(){
      $(".message").html("Get message");
});

＆＃13;

<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>

＆＃13;

Answer 3

你可能会错过jQuery脚本文件。这对我来说非常适合。

＆＃13;

<!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>

＆＃13;

Javascript（“点击”）无法正常工作

3 个答案: