0
私は、フロントエンドプログラミングには新しく、プロジェクト（boostrap、grails、jquery）に対して複数の新しい（私に）技術を使用しています。だから、次の問題は、経験豊かなフォント・エンド開発者には間違いないかもしれないので、私をユーモアしてください。クリック機能上のJQueryボタンが機能しない
問題：私の人生でjqueryスクリプトのbutton.click機能が起動しない理由を理解できません。アラートは起動されず、URLへの実際のAjaxコールも起動されません。スクリプトを含む.gspファイルのbodyタグは次のとおりです。助けて！
<body>
<div id="top"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="input-group">
<input id="searchQuery" type="text" class="form-control" placeholder="${message(code: 'search.enterquery', default: 'Enter query')}" >
<span class="input-group-btn">
<button id="searchButton" class="btn btn-default" type="button"><g:message code="search.search" /></button>
</span>
</div>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row">
<div id="searchResults">
Results will appear here
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#searchButton").click(function() {
alert("button was clicked");
$.ajax({
type: "POST",
url: "${g.createLink(controller:'library',action:'search')}",
dataType: 'html',
data: { query: $("#searchQuery").val()},
success:function(result){
$("#searchResults").html(result);
}
error:function() {
$('#searchResults').text('An error occurred');
}
complete:function() {
}
});
});
});
</script>
</body>
これはほとんどの場合、コンソールエラーメッセージが表示されるはずです。 ChromeでF12キーを押して、デベロッパーツールを開いてそのようなメッセージを表示します。 – billjamesdev