Question

我正在编写一个html页面，其中有1个不同的jquery操作。

从jquery datepicker插件中选择日期。
从数据库中获取数据以自动完成。

以下是我的代码。

的index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Autocomplete in java web application using Jquery and
    JSON</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="autocompleter.js"></script>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<link rel="stylesheet" href="style.css">

</head>
<body>
    <div class="header">
        <h3>Autocomplete in java web application using Jquery and JSON</h3>
    </div>
    <br />
    <br />
    <div class="search-container">
        <div class="ui-widget">
            <input type="text" id="search" name="search" class="search" />
        </div>
    </div>
    <p>
        Date: <input type="text" id="startDatePicker">
    </p>
    <p>
        Date: <input type="text" id="endDatePicker">
    </p>
    <div id="resultarea"></div>
</body>
</html>

autocompleter.js

$(document).ready(function() {
    $(function() {
        $("#startDatePicker").datepicker();
        $("#endDatePicker").datepicker();
    });
});

$(document).ready(function() {
    $(function() {
        $("#search").autocomplete({
            source : function(request, response) {
                $.ajax({
                    url : "Controller",
                    type : "GET",
                    data : {
                        term : request.term
                    },
                    dataType : "json",
                    success : function(data) {
                        response(data);
                    }
                });
            }
        });
    });
});

在这里，获取显示名称的数据工作正常，但是datepicker没有按预期工作。但是当我使用下面的代码时。（从index.html标头的脚本标记中删除日期选择器并将其粘贴）。 datepicker工作正常。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Autocomplete in java web application using Jquery and
    JSON</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="autocompleter.js"></script>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<link rel="stylesheet" href="style.css">
<script>
    $(function() {
        $("#startDatePicker").datepicker();
        $("#endDatePicker").datepicker();
    });
</script>
</head>
<body>
    <div class="header">
        <h3>Autocomplete in java web application using Jquery and JSON</h3>
    </div>
    <br />
    <br />
    <div class="search-container">
        <div class="ui-widget">
            <input type="text" id="search" name="search" class="search" />
        </div>
    </div>
    <p>
        Date: <input type="text" id="startDatePicker">
    </p>
    <p>
        Date: <input type="text" id="endDatePicker">
    </p>
    <div id="resultarea"></div>
</body>
</html>

我无法知道我哪里出错了。为什么第二个代码有效，为什么不是第一个代码。

我的一位老师建议简单地制作HTML并链接所有的css和js是一个很好的设计方法，所以我想将js文件与HTML分开。

由于

Answer 1

为什么要将此包装在两个 document.ready处理程序中？：

$(document).ready(function() {
    $(function() {
        $("#startDatePicker").datepicker();
        $("#endDatePicker").datepicker();
    });
});

请注意与“工作”版本的区别：

$(function() {
    $("#startDatePicker").datepicker();
    $("#endDatePicker").datepicker();
});

在jQuery中执行此操作时：

$(function () { /.../ });

它将该函数附加到document.ready事件。这意味着您的工作版本说：

在document.ready上，初始化日期选择器。

您的非工作版本说：

在document.ready上，将另一个函数附加到document.ready处理程序，该处理程序本身将初始化日期选择器。

由于document.ready只发生一次，所以第二个处理函数永远不会执行。

你已经一个“工作”版本，所以请使用：

$(function() {
    $("#startDatePicker").datepicker();
    $("#endDatePicker").datepicker();
});

Answer 2

删除$(function() {});函数中的上层$(document).ready();，它应该可以正常工作。

两者都做同样的“当doc准备就绪时......”，所以没有必要让它们兼顾并且有问题让它们嵌套。

您的第一段代码无效，因为您的脚本等待文档准备好执行等待文档准备好的功能，并且已经发生了。

当文档像往常一样准备好时，第二个执行代码。

多个jquery函数不起作用

2 个答案: