使用 jquery-ui 将 ajax 添加到现有页面答案

【问题标题】：Add ajax to existing page with jquery-ui使用 jquery-ui 将 ajax 添加到现有页面
【发布时间】：2021-10-14 02:43:00
【问题描述】：

我在新的现有页面系统中实施的高级搜索需要帮助。

页面上现有的jquery ui好像有问题：

<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="js/jquery.lazy.min.js"></script>

当我输入我的代码时，页面不再正常工作。我的代码：

$(document).ready(function() { 
    // Icon Click Focus
    $('div.icon').click(function(){
        $('input#warenkorb_suche_feld').focus();
    });

    // Live Search
    // On Search Submit and Get Results
    function search() {
        var query_value = $('input#warenkorb_suche_feld').val();
        $('b#search-string').text(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#warenkorb_suche_feld").live("keyup", function(e) {
        // Set Timeout
        clearTimeout($.data(this, 'timer'));

        // Set Search String
        var search_string = $(this).val();

        // Do Search
        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));
        };
    });
});

搜索脚本工作正常，但我需要添加

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

在此页面停止工作后。我该怎么做才能让这些东西正常工作？

【问题讨论】：

欢迎来到 Stack Overflow！这段代码以什么方式失败？浏览器的开发控制台是否有任何错误？当您使用浏览器的调试工具进行调试时，具体会发生什么？另外，jQuery 的.live() 是古老的，现在可能是更新代码的好时机。此外，此示例是否暗示您在页面上加载了两个不同版本的 jQuery？如果是这样，你应该只需要一个。
欢迎来到 Stack Overflow。当您查看控制台时，您会看到任何错误吗？我看不到search() 的执行位置。
听起来您正在用另一个 jQuery 覆盖现有的 jQuery，但没有 minimal reproducible example 供我们确定。 jQuery 1.7.1 非常古老且不受支持，因此无论如何您都不应该使用它。
@David 谢谢，你让我大开眼界。有两个版本的 jquery，一个更新的版本 1.10.2 正在运行并且 .live() 破坏了整个页面。我将其更改为 [code]$("input#warenkorb_suche_feld").on("keyup", null, function(e) {[/code] 现在它工作正常。:-)

标签： javascript jquery ajax jquery-ui

【解决方案1】：

考虑以下问题。我无法测试它。

$(function() {
  function search(term, callback) {
    $('b#search-string').text(term);
    $.ajax({
      type: "POST",
      url: "search.php",
      data: {
        query: term
      },
      cache: false,
      success: function(html) {
        $("ul#results").html(html);
        if(callback && (typeof callback == "function")){
          callback();
        }
      }
    });
    return false;
  }

  $('div.icon').click(function() {
    $('input#warenkorb_suche_feld').focus();
  });

  $("input#warenkorb_suche_feld").on("keyup", function(e) {
    // Set Search String
    var search_string = $(this).val();

    // Do Search
    if (search_string.length > 0) {
      $("ul#results, h4#results-text").fadeOut(400, function() {
        search(search_string, function() {
          $("ul#results, h4#results-text").fadeIn();
        });
      });
    }
  });
});

这利用了.fadeOut() 的complete 回调。因此，一旦它消失，它将运行搜索。我在搜索中添加了一个回调，以便在 AJAX 完成后，它会以.fadeIn() 显示结果。

您可能需要考虑调整length 条件。这确保了

【讨论】：