javascript - 同一页面上的 jQuery 重新加载函数导致错误-6ren

javascript - 同一页面上的 jQuery 重新加载函数导致错误

转载作者：行者123 更新时间：2023-12-01 05:33:42

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

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

Uncaught TypeError: $ is not a function

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

Uncaught TypeError: Cannot read property 'noConflict' of undefined

...再次选择位置时。

实际上，我在另一个网站上有另一个类似的搜索栏，效果很好。只是在这个网站上，页面末尾加载了一个旧的 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")
    );
?>

感谢任何帮助。

最佳答案

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

基本上我所做的就是在调用替换代码时再次加载 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")
    );
?>

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

关于javascript - 同一页面上的 jQuery 重新加载函数导致错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35324973/

文章推荐： jquery - 如何使用 JSPM 填充 jQuery 插件？

文章推荐： Liferay - 在 javascript 中获取本地化名称

文章推荐： prolog - 如何编写程序来查找完全封闭的瓷砖？

文章推荐： opengrok - 使用 opengrok 搜索历史记录

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 同一页面上的 jQuery 重新加载函数导致错误