引導按鈕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不起作用

回答

相關問題