Question

我的代码有问题，我尝试创建一个从导航栏打开多个页面的网站。页面加载完美，但在打开页面后，当我在该页面上搜索结果时，它显示双重结果，2x索引2x首页...

如果我打开同一页两次然后再搜索它，那么我会看到结果3次。

有人能看出问题所在吗？

＆＃13;

  //Load page in #container
  $('[data-target]').click( function (e) { 
    //$('#container').load($(this).attr('href'));
    var target = $($(this).attr('data-target'));
    target.load($(this).attr('href'));
    e.preventDefault(); // prevent anchor from changing window.location
  });  

  //Live search
  $('#search').keyup(function(){
  	 $('#container').empty();
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, 'i');
    $.getJSON('data.json', function(data){
      $.each(data, function(key, val){
        if(val.name.search(myExp) != -1) {
          var newDiv = $('<div class="target">').append(val.name).click(function(){
            $('#container').load(val.doc+" "+val.shortname);
          });
          newDiv.append('</div>');
          //alert(newDiv);
          $('#container').append(newDiv);
        }
      });
    });
    newDiv = "";
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

问题是您的AJAX请求需要一些时间。您清空容器，然后发出请求。当它加载另一个键时，它会启动另一个AJAX请求。当两个请求完成时，它们都假定容器已经被清除并且只是附加结果，因此是双重结果。

尝试在追加之前清空容器：

$('#container').empty().append(newDiv);

完整代码：

＆＃13;

  //Load page in #container
  $('[data-target]').click( function (e) { 
    //$('#container').load($(this).attr('href'));
    var target = $($(this).attr('data-target'));
    target.load($(this).attr('href'));
    e.preventDefault(); // prevent anchor from changing window.location
  });  

  //Live search
  $('#search').keyup(function(){
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, 'i');
    $.getJSON('data.json', function(data){
      $('#container').empty()
      $.each(data, function(key, val){
        if(val.name.search(myExp) != -1) {
          var newDiv = $('<div class="target">').append(val.name).click(function(){
            $('#container').load(val.doc+" "+val.shortname);
          });
          newDiv.append('</div>');
          //alert(newDiv);
          $('#container').append(newDiv);
        }
      });
    });
    newDiv = "";
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

使用.load（）将页面加载到livesearch但获得结果2或3次

1 个答案: