同一页面上的jQuery重新加载功能导致错误答案

【问题标题】：jQuery reloading function on same page causing error同一页面上的jQuery重新加载功能导致错误
【发布时间】：2016-02-10 20:13:03
【问题描述】：

我正在制作一个带有选择框和输入字段的搜索栏。输入字段使用 jQuery 预测搜索。选择框有2个选项；位置和存档，位置是默认值。选择存档时，它会用 jQuery datepicker 函数替换输入字段，并用另一个输入字段替换已删除的输入字段。

现在，当您选择每个选项一次时，所有这些都可以正常工作。如果您返回并再次选择其中一个选项，它将停止运行并在控制台中生成错误。

未捕获的类型错误：$ 不是函数

...当再次选择存档时，并且...

未捕获的类型错误：无法读取未定义的属性“noConflict”

...再次选择位置时。

实际上，我在另一个网站上有另一个类似的搜索栏，效果很好。只是在这个网站上有一个旧的 jQuery 版本加载在我无法触摸的页面末尾。

如果用户多次选择相同的选项，我该如何解决这些错误/冲突？

搜索栏文件：

<html>
<head>
<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://www.example.com/css/foundation3.css">

  <script src="http://www.example.com/javascripts/modernizr.foundation.js"></script>

    </head>
<body>  


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">


<form id="form1" name="form1" method="post" action="http://www.example.com/search/" >

<div class="row">  
<div class="two columns" style="padding: 0;">
    <select name="drop_list_menu" id="drop_list_menu" class="drop">
        <option value="1">Location</option>
        <option value="2">Archive</option>
    </select>
</div>

<span id="result_menu">
<div class="eight columns" style="padding: 0;">

        <input type="text" name="search" id="search" size="35" style="height: 37px; max-width: 250px; display: inline;" placeholder="Example: New York, NY"/>

</div>  

<div class="two columns" style="padding: 0;">
    <input type="submit" name="submit" id="submit" value="Search" class="button" style="width: 120px;" />
</div>  

</span>

</div>  

</form>



 <script>

jQuery( document ).ready(function( $ ) {

        var n;
        var u;
        var username = '<?php echo $user_name_global;?>';
        var tab = '1';



            // if user chooses an option from the select box...
             $(".drop").change(function (e) {
            var SelectId = "#"+e.target.id
            //alert(SelectId);

                //var element = document.getElementsByClassName('drop').id;
                //var changedElement = this;
        var i = SelectId.split('menu_')[1];
        var sbox_menu = '#sbox_menu';
        var result_menu = '#result_menu';

        var slot = i;
        //alert(result_menu);


                // get selected value from selectbox with id #drop_list
                var selectedDepartment = $(this).val();
                //alert(selectedDepartment);    

                $.ajax({

                    url: "http://www.example.com/search/get_dept_search.php",
                    data: "q="+selectedDepartment,
                    dataType: "json",

                    // if successful
                    success: function (response, textStatus, jqXHR) {

                            var list = $("#result_menu");

                            $.each(response.teacherNames, function (i, val) {
                                $(result_menu).html(val);
                            });

                    }});

            });



                    var availableTags = "http://www.example.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });
                    //predsearch.stopPropagation();


        });

    </script>

  <script src="http://www.example.com/javascripts/foundation.min.js"></script>

  <!-- Initialize JS Plugins -->
  <script src="http://www.example.com/javascripts/app.js"></script>
</body>
</html>

包含替换代码的文件：

<?php

$q = $_GET["q"];

if(stripos($q, '1') !== FALSE)
{
$y = array();
$y[] = '<script>
jQuery.noConflict();
jQuery(document).ready(function($){
  $(function() {
    var availableTags = "http://www.example.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });   
});
});
  </script>
 <div class="six columns" style="padding: 0;">
    <input  type="text" id="search" name="search"/>
    <input type="hidden" name="search_url"  id="search_url">
    </div>
  <div class="two columns" style="padding: 0;">
    <input type="submit" value="Search" class="button tiny" style="height: 3.4em;">
    </div>';
}

if(stripos($q, '2') !== FALSE)
{
$y = array();
$y[] = '<script>
jQuery.noConflict(true);
(function( $ ) {
  $(function() {
    $( "#datepicker" ).datepicker();

    var availableTags = "http://www.example.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });
     });
})(jQuery);
  </script>
  <div class="six columns" style="padding: 0;">
  <div class="four columns" style="padding: 0;"><input type="hidden" name="search_url" id="search_url"><input type="text" id="datepicker" name="datepicker" placeholder="Pick a date"></div><div class="eight columns" style="padding: 0;"><input  type="text" id="search" name="search"/ placeholder="Choose a location"></div>
  </div>
  <div class="two columns" style="padding: 0;">
    <input type="submit" value="Search" class="button tiny " style="height: 3.3em;">
    </div>
  ';
}

 print json_encode(array(
            "teacherNames" => $y,
            "anotherReturnValue" => "just a demo how to return more stuff")
    );
?>

任何帮助表示赞赏。

【问题讨论】：

您是否尝试仅删除 $.noConflict();，您不需要它，这就是引发错误的原因。
@adeneo 最初 $.noConflict() 不存在。只有在这种配置中，我才真正让这件事发挥作用。
好吧，你没有使用它，因为你正在使用jQuery( document ).ready(function( $ ) {，所以你最好删除$.noConflict行，它什么都不做。
@adeneo 已删除...但没有区别，结果相同。
双击控制台中的错误 -- 应该会在代码中显示失败的行号

标签： javascript jquery

【解决方案1】：

嗯，我修好了。不为我的做法感到自豪，但如果它有效......它有效。

基本上我所做的只是在调用替换代码时再次加载 jQuery。

我所做的只是添加：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

新的替换代码：

<?php

$q = $_GET["q"];

if(stripos($q, '1') !== FALSE)
{
$y = array();
$y[] = '
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
  $(function() {
    var availableTags = "http://www.friendlyforecast.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });   
});
});
  </script>
 <div class="six columns" style="padding: 0;">
    <input  type="text" id="search" name="search"/>
    <input type="hidden" name="search_url"  id="search_url">
    </div>
  <div class="two columns" style="padding: 0;">
    <input type="submit" value="Search" class="button tiny" style="height: 3.4em;">
    </div>';
}

if(stripos($q, '2') !== FALSE)
{
$y = array();
$y[] = '<script>
jQuery.noConflict(true);
(function( $ ) {
  $(function() {
    $( "#datepicker" ).datepicker();

    var availableTags = "http://www.friendlyforecast.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });
     });
})(jQuery);
  </script>
  <div class="six columns" style="padding: 0;">
  <div class="four columns" style="padding: 0;"><input type="hidden" name="search_url" id="search_url"><input type="text" id="datepicker" name="datepicker" placeholder="Pick a date"></div><div class="eight columns" style="padding: 0;"><input  type="text" id="search" name="search"/ placeholder="Choose a location or publication"></div>
  </div>
  <div class="two columns" style="padding: 0;">
    <input type="submit" value="Search" class="button tiny " style="height: 3.3em;">
    </div>
  ';
}

 print json_encode(array(
            "teacherNames" => $y,
            "anotherReturnValue" => "just a demo how to return more stuff")
    );
?>

我希望有一个更好的解决方案，如果你有一个，我仍然想听听。我将等待几天，然后将我的答案标记为正确答案。

【讨论】：