使用Javascript（“click”）不起作用

由于某种原因，我的JS在点击不起作用。我有标记的id和类。使用Javascript（“click”）不起作用

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

来源

2016-11-04 Mohammad Syed

你不包括jQuery，所以jQuery不会工作。添加'<脚本 \t \t \t SRC = “https://code.jquery.com/jquery-3.1.1.min.js” \t \t \t完整性= “SHA256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8 =” \t \t \t crossorigin =”匿名“>'到您的HTML。 –

总是检查控制台是否有错误..如果你没有包含jQuery，你会得到一个错误（$未定义） –

如果您打算使用某个库的功能 - 在这种情况下使用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>

来源

2016-11-05 08:15:07 Flyer53

你为什么不简单地使用jQuery。点击（）函数？ $（“＃getMessage”）。click（function（）{...}）; – creekorful

你可以包含jQuery，或者如果你想“试试”一个库，你可以使用任何可用的CDN。如'http：// cdnjs.com'并键入jquery，并将脚本复制粘贴到index.html – TechnoCorner

@creekorful您可以使用'.click（handler）'，当然这只是'.on “点击”，处理程序）'。我几乎总是使用'$（document）.on（event，elmt，handler）'，因为它也适用于稍后添加到文档中的元素。 – Flyer53

您可能忽略了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>

来源

2016-11-05 08:23:42 Nitheesh

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

你忘了包括脚本，如果没有你可能会错过对齐的脚本文件，请首先加载它。

来源

2016-11-05 09:06:15

使用Javascript（“click”）不起作用

回答

相关问题