多个jquery函数不起作用答案

【问题标题】：multiple jquery functions not working多个jquery函数不起作用
【发布时间】：2015-12-29 14:42:09
【问题描述】：

我正在编写一个 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);
                    }
                });
            }
        });
    });
});

在这里，获取显示名称的数据工作正常，但日期选择器没有按预期工作。但是当我使用下面的代码时。（从 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 分开。

谢谢

【问题讨论】：

两个函数都可以放在一个$(document).ready(...
autocompleter.js 有两个$(document).ready(function(){});，整个文档应该只有一个。这个函数相当于说在页面加载时执行此操作，但你有两次，这是利益冲突，你应该只需要一个并将所有代码放在那里
添加到我之前的评论，作为一个经验法则：你所有的 javascript/jquery <script> 标签应该写在之后你的 <body> 标签

标签： jquery html datepicker

【解决方案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();
});

【讨论】：

为了它，编辑这个好的答案并添加他们应该总是在<body>之后添加他们的脚本标签
@AGE：虽然这通常是个好建议，但与问题无关。对于提供的代码，它真的不会有什么不同。
同意，我只是认为这会对您的回答起到很好的补充作用
感谢@AGE，这很有帮助

【解决方案2】：

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

两者都执行相同的“当文档准备好时执行此操作...”，因此没有必要同时拥有它们，并且将它们嵌套起来有问题。

您的第一段代码不起作用，因为您的脚本等待文档准备好执行一个等待文档准备就绪的函数，而这已经发生了。 p>

第二个在文档准备就绪时像往常一样执行代码。

【讨论】：