引导按钮onClick不起作用

我使用引导程序并有一个简单的布局，包括一个按钮。我尝试了here的代码解决方案，但它不起作用。这是我的代码，点击搜索按钮后甚至没有显示“测试”。引导按钮onClick不起作用

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden --> 
    <title>Search</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <h1>Welcome!</h1> 
    </br> 
    <button id="search" type="button" class="btn btn-primary">Suchen</button> 
    <p><br/></p> 
    <p id="output"></p> 
    </div> 
    <script type="text/javascript"> 
     $('#search').on('click', function (e) { 
     document.getElementById('#output').innerHTML = "test"; 

     var EventSearch = require("facebook-events-by-location-core"); 

     var es = new EventSearch({ 
      "lat": 40.710803, 
      "lng": -73.964040 
     }); 

     es.search().then(function (events) { 
      console.log(JSON.stringify(events)); 
      document.getElementById('output').innerHTML = JSON.stringify(events); 
     }).catch(function (error) { 
      console.error(JSON.stringify(error)); 
     }); 
     }) 
    </script> 

    <!-- jQuery (notwendig für Bootstraps JavaScript plugins) --> 
    <script src="js/jquery-3.2.1.min"></script> 
    <!-- Alle kompilierten plugins einbeziehen --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
    </html>

来源

2017-04-26 10jo10

使用的document.getElementById（），你不要在ID前需要#。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden --> 
 
    <title>Search</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
     <![endif]--> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid"> 
 
     <h1>Welcome!</h1> 
 
    </br> 
 
    <button id="search" type="button" class="btn btn-primary">Suchen</button> 
 
    <p><br/></p> 
 
    <p id="output"></p> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     $('#search').on('click', function (e) { 
 
     document.getElementById('output').innerHTML = "test"; 
 
     // I removed the event search code because I do not have the files and it was breaking the example. 
 
     }) 
 
    </script> 
 

 
    <!-- jQuery (notwendig für Bootstraps JavaScript plugins) --> 
 
    <script src="js/jquery-3.2.1.min"></script> 
 
    <!-- Alle kompilierten plugins einbeziehen --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    </body> 
 
    </html>

来源

2017-04-26 16:21:00 Ken

如果我运行的代码片段在计算器它的工作原理，但如果我从sublimetext运行相同的这是行不通的。 – 10jo10

如果这是你唯一的代码，它看起来像你不包括jQuery，这将使$（'＃search'）。on（... break。 – Ken

谢谢你的回答。但我说，这是不是包括jquery？路径和文件名也是正确的。 – 10jo10

首先，使用的document.getElementById时，不要使用 “＃” 符号。其次，你需要添加“require”引用。

检查控制台消息：

$('#search').on('click', function (e) { 
 
     document.getElementById('output').innerHTML = "test"; 
 

 
     var EventSearch = require("facebook-events-by-location-core"); 
 

 
     var es = new EventSearch({ 
 
      "lat": 40.710803, 
 
      "lng": -73.964040 
 
     }); 
 

 
     es.search().then(function (events) { 
 
      console.log(JSON.stringify(events)); 
 
      document.getElementById('output').innerHTML = JSON.stringify(events); 
 
     }).catch(function (error) { 
 
      console.error(JSON.stringify(error)); 
 
     }); 
 
     })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
     <h1>Welcome!</h1> 
 
    </br> 
 
    <button id="search" type="button" class="btn btn-primary">Suchen</button> 
 
    <p><br/></p> 
 
    <p id="output"></p> 
 
    </div>

来源

2017-04-26 16:22:29 AHBagheri

如果我注释掉搜索部分，它仍然不起作用它不显示'测试'）从我崇高的文本编辑器。 – 10jo10

引导按钮onClick不起作用

回答

相关问题