单击功能上的JQuery按钮不起作用答案

【问题标题】：JQuery button on click function not working单击功能上的JQuery按钮不起作用
【发布时间】：2016-03-27 17:32:06
【问题描述】：

我是前端编程的新手，并且在一个项目（boostrap、grails、jquery）中使用了多种新的（对我而言）技术。因此，对于有经验的字体端开发人员来说，下面的问题可能是不费吹灰之力的，所以请幽默。

问题：我无法弄清楚为什么 jquery 脚本中的 button.click 函数没有触发。既不会触发警报，也不会触发对 URL 的实际 ajax 调用。 .gsp 文件（包括脚本）的正文标记如下。救命！

<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 以打开开发者工具以查看此类消息。

标签： javascript jquery ajax twitter-bootstrap grails

【解决方案1】：

你在成功和错误回调之后错过了逗号（，）。

success:function(result){
    $("#searchResults").html(result);
},   //here
error:function() {
    $('#searchResults').text('An error occurred');
}, //here
complete:function() {
}

【讨论】：