点击功能上的JQuery按钮不起作用

JQuery button on click function not working

本文关键字：按钮不起作用 JQuery 功能上更新时间：2023-09-26

我是前端编程的新手，在项目中使用多种新技术（boostrap、grails、jquery）。因此，对于经验丰富的字体端开发人员来说，以下问题可能是一个无需思考的问题，所以请幽默我

问题：我不明白为什么在我的一生中，jquery scrip中的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>

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

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