Search code examples
jqueryincompatibility

jQuery new version incompatible script


I'm a beginner. The following script works fine with old versions of jQuery, but it's not compatible with jquery-3.3.1. Please help me..

<script type="text/javascript">
$(document).ready(function() {
  $('#results-text').fadeOut();
  function search() {
    var query_value = $('input#search').val();
    $('b#search-string').html(query_value);
    if(query_value !== ''){
      $.ajax({
        type: "POST",
        url: "search.php",
        data: { query: query_value },
        cache: false,
        success: function(html){
          $("table#results").html(html);
        }
      });
    }return false;    
  }
  $("input#search").live("keyup", function(e) {
    clearTimeout($.data(this, 'timer'));
    var search_string = $(this).val();
    if (search_string == '') {
      $('#results-text').fadeOut();
    }else{
      $('#results-text').fadeIn();
      $(this).data('timer', setTimeout(search, 100));
    };
  });
});
</script>

Solution

  • jQuery .live() has been removed in version 1.9 onwards.

    Use on instead of live

    Example:-

      <script type="text/javascript">
        $(document).ready(function() {
          $('#results-text').fadeOut();
          function search() {
            var query_value = $('input#search').val();
            $('b#search-string').html(query_value);
            if(query_value !== ''){
              $.ajax({
                type: "POST",
                url: "search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                  $("table#results").html(html);
                }
              });
            }return false;    
          }
          $("input#search").on("keyup", function(e) { //changed on instead of live
            clearTimeout($.data(this, 'timer'));
            var search_string = $(this).val();
            if (search_string == '') {
              $('#results-text').fadeOut();
            }else{
              $('#results-text').fadeIn();
              $(this).data('timer', setTimeout(search, 100));
            };
          });
        });
        </script>