Question

我的jQuery / Javascript代码有问题。所有工作都按预期工作，但一段时间后页面变得没有响应，导致jQuery的Unresponsive Script错误。我使用jQuery Library将列表显示为封面流。

此外，在对后端的所有调用之后，我必须刷新特定的div，因此每次调用后端时都会销毁并重新创建div。

请让我知道下面给出的代码结构中的问题：

（请注意，这只是一个包含重要方法的片段。所有这些方法都有其他写入的逻辑，这里没有显示。）

function showAllData(dataFromServer) {
  $('#child').remove();
  $('#parent').append($('<div id="child"></div>'));

  $.each(dataFromServer.someArray, function(index, item) {
    var html = '<li>' + item + '</li>';
    $('#child').append($(html));
  });

  //Attach Event to div
  $("#child").on("click", function() {
    removeTag();
  });
};

$(document).ready(function() {
  //got data from server(Spring MVC) in a var 'dataFromServer'
  //code not written here
  showAllData(dataFromServer);
  $("#child").flipster(); //a coverflow library	
});


$(document).on('submit', '#formSubmit', function(event) {
  event.preventDefault();
  $.ajax({
    url: url,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    async: true,
    cache: false,
    data: JSON.stringify({
      dataFromClient: dataFromServer
    }),
    type: "POST",
    success: function(data) {
      dataFromServer = data;
      showAllData(dataFromServer);
      $("#child").flipster();
    },
    error: function(xhr, status, error) {
      console.log(xhr.responseText);
    }
  });
  return false;
});

function removeTag() {
  $.ajax({
    url: 'deleteBooks',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    async: true,
    cache: false,
    data: JSON.stringify({
      keyword: tag,
      dataFromClient: dataFromServer
    }),
    type: "POST",
    success: function(data) {
      dataFromServer = data;
      showAllData(dataFromServer);
      $("#child").flipster();
    },
    error: function(xhr, status, error) {
      console.log(xhr.responseText);
    }
  });
};

有什么想法吗？

[编辑]：在移动设备上访问网站时会很快发生这种情况。页面冻结了！但是在处理桌面版本时，页面在一段时间后会变得无响应，并且会引发错误Maximum Call Stack Size Reached错误。

这可能是因为智能手机的记忆。尽管如此，两个版本都存在问题。

Answer 1

您正在进行一些递归，它会以指数方式添加#child .click()个处理程序。我已经制作了这个jsFiddle来简化您的代码并演示正在发生的事情。打开控制台，单击“提交”开始，然后在其中一个列表项上单击几次。您将看到每次单击，控制台输出越来越多的行。

尝试在$("#child").on("click"...){}

之外移动function showAllData(){}

<强>更新：因此，在删除并重新添加#child后，处理程序可以正常工作，您可以像这样添加点击监听器：

$('#parent').on('click', '#child', function() {
    // 
});

我已将此更新为jsFiddle。

更新2 ：我看到Flipster在您刷新#child之后没有重新初始化并提出了这个问题：

将$("#child").flipster();更改为$("#parent").flipster();。然后在$('#child').remove()中执行showAllData()：

// remove the flipster classes from #parent or flipster will not re-initialise when called next time.
$('#parent').removeClass('flipster').removeClass(function(index, css) {
    return (css.match(/(^|\s)flipster-\S+/g) || []).join(' ');
});

我把它放在codePen。

一段时间后，页面变得反应迟钝

1 个答案: