Question

当在HTML文件中单击按钮时，我需要在jQuery中调用一个方法。但我无法调用该方法。请帮我解决这个问题。请告诉我代码中的错误。

我的html文件是

<!DOCTYPE html >
<html>
    <head>
        <title>Similar Entity Search-DFS</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery   -1.10.0.min.js" ></script>
        <script type="text/javascript" src="newJs.js" ></script>
    </head>
    <body>


        <div class ="filter" id="search-panel">
            <div class="search" id="search-box">
                                 <label>Enter Entity tuple</label>
                <button type="button"  class="btn-primary" id="search-button" >Search</button>
            </div>

        </div>


    </body>
 </html>

这个html文件调用jQuery文件newJs.js，它有jQuery

这是我的javascript文件

 $(function(){

                page.init();

        });

        var page = {
            addEvent:function(){
                alert("here");
                   page.controls.searchButton.click(page.handlers.onSearchButtonClick);

            },

            handlers:{

                onSearchButtonClick: function(){

                alert("hi");
            },
            controls:{
            }

        },
    init: function(){

        page.controls.searchBox = $('#search-box');
        page.controls.searchPanel = $('#search-panel');     
        page.controls.searchButton = $('#search-button');
        page.addEvent();
    }
}

我无法打印搜索按钮方法中显示的警告消息。请告诉我在这些代码中应该做出的更正。

非常感谢。

Answer 1

你应该把正确的链接放到jquery库然后它就是文档的准备动作和按钮的单击动作

$(function (){
  $("#search-button").click(function (){
    alert("clicked"); return false;
  })
});

如果可以轻松编码，则无需编写如此复杂的代码。

Answer 2

addEvent不是jQuery方法：它是一种不同的事件处理方法。如果您正在使用jQuery，请使用类似

的内容

$('#search-button').on('click', function() {
   // Do your searching stuff here
   alert("Searching!")});

或者，您可以获得'addEvent'实现here

Answer 3

图书馆网址格式错误，应该是：http://code.jquery.com/jquery-1.10.0.min.js

这就是为什么第一个错误是$未定义。

您可以在本次演示中看到更正后的版本：http://jsbin.com/odozey/1/edit

此外，在您的示例中，controls是handlers的孩子，因此init功能也失败了，因为它正在查找page.controls。

因此，在上面的DEMO中，我将其修改为page的孩子。正如你所看到的那样。

从HTML文件调用jQuery方法不起作用

这是我的javascript文件

3 个答案: