Javascript onclick函數html

-1

我想定製一些公共git，並且因爲我是Jquery/Javascript中的noob我不知道如何正確地將onclick函數綁定到按鈕，以便它知道如何調用getStates （）函數。是的，我知道我可以刪除$(function(){，它會工作，但我希望能夠在jQuery中調用它的功能？Javascript onclick函數html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>US Hospitals</title> 
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'> 
</script> 
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' /> 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="/lib/neo4j-web.min.js"></script> 
</head> 
<body> 
<div id="desc"> 
    <div class="row top-row"> 
     <div class="col-xs-6"> 
      <h3 class="heading">US Hospitals</h3> 
     </div> 
     <div class="col-xs-6"> 
      <p class="lead"></p> 
     </div> 
     <button onclick="$.getStates();">Load States!</button> 
    </div> 
</div> 
<div id='map'></div> 
<script> 
$(function(){ 

    function getStates() {  
     session 
      .run(districtQuery) 
      .then(function(result){ 
       result.records.forEach(function(record) { 
        drawPolygons(parseWKTPolygons(record.get("wkt")), 
record.get("text")); 

       }); 
      }) 
    } 
</script> 
</body> 
</html>

我得到的錯誤說：

Uncaught TypeError: $.getStates is not a function at HTMLButtonElement.onclick (index.html:51)

來源

2017-04-07 Tomaž Bratanič

因爲jquery沒有getStates方法。將它包裝在一個document.ready中不會那樣做。擺脫document.ready代碼並更改點擊以調用方法。 – epascarello

你可以一個ID添加到按鈕，使用這樣的：

<button id="load-states">Load States!</button>

的Javascript：

$(function() { 
    function getStates() { 
    session 
     .run(districtQuery) 
     .then(function(result){ 
      result.records.forEach(function(record) { 
       drawPolygons(parseWKTPolygons(record.get("wkt")),record.get("text")); 
      }); 
     }) 
    } 
// Adding event onClick to button 
$('#load-states').on('click', getStates);        

});

來源

2017-04-07 22:39:04 daronwolff

您可以進行功能全球：

window.getStates = function getStates() { 
    ... 
};

然後你就可以在onclick屬性簡單地使用getStates()。

當然，更簡單的方法是使用jQuery的$.click()從JavaScript本身綁定事件。這需要您將一個id屬性添加到按鈕標記，或者通過其他方式從jQuery中識別它。

來源

2017-04-07 22:25:40 itdoesntwork

從$(function() { ... })中取出函數，因爲從onclick調用的函數必須位於全局範圍內。並把它作爲getStates()，不$.getStates()

<script> 
function getStates() {  
    session 
     .run(districtQuery) 
     .then(function(result){ 
      result.records.forEach(function(record) { 
       drawPolygons(parseWKTPolygons(record.get("wkt")), 
       record.get("text")); 
      }); 
     }) 
} 
</script>

來源

2017-04-07 22:26:49 Barmar

$(function() { })

這是告訴解釋器在頁面準備就緒後立即運行任何JavaScript/jQuery代碼。這通常被稱爲已準備好的功能。你通常不會在這裏創建其他功能。

刪除：

$(function() { })

此外，您所創建的onclick事件的方式是錯誤的。使用的getStates()代替$.getStates()

所以，這一切的一切，你的代碼應更改如下：

<button onclick="getStates();">Load States!</button> 

<script> 
function getStates() {  
    session 
     .run(districtQuery) 
     .then(function(result){ 
      result.records.forEach(function(record) 
      { 
       drawPolygons(parseWKTPolygons(record.get("wkt")), 
       record.get("text")); 

      }); 
     }); 
} 
</script>

你可以解決它的另一種方式就是離開你的onready功能和內部創建的單擊事件。你的getStates（）函數仍然需要放在onready函數之外，你可以從按鈕元素中刪除onclick。

例如：

<button>Load States!</button> 

<script> 
$(function() { 
    $('button').click(function() { 
     getStates(); 
    }); 
}); 

function getStates() {  
    session 
     .run(districtQuery) 
     .then(function(result){ 
      result.records.forEach(function(record) { 
       drawPolygons(parseWKTPolygons(record.get("wkt")), 
       record.get("text")); 

      }); 
     }) 
} 
</script>

現在，如果你有此頁面上有一個按鈕，你將需要添加一個ID或類來區分它們。然後，您將替換$('button')，例如：$('#load_states_button)（如果使用的是ID）或$('.button_class')（如果使用的是類）。

這些都產生相同的結果，所以如何做到這一點只是個人喜好的問題。

希望這有助於！如果您有任何問題，請告訴我。 :)

來源

2017-04-07 22:42:48

Javascript onclick函數html

回答

相關問題