2

我正在尝试将单击处理程序绑定到 DOM 上的多个元素。单击后，该元素会在阴影框中加载一些新内容。在玩了一会儿代码后，我注意到每次单击时加载时间越来越长。

我通过禁用除了简单的 console.log 之外的所有点击处理程序的功能来测试这一点。即使在此之后，到第 15 次单击时，响应也变得越来越慢。我点击了哪个帖子都没有关系，或者即使内容已经加载了——在第 15 次点击这个“.shadowbox-link”元素时它真的开始变慢了。

这是我的点击处理程序：

$j('#content article .shadowbox-link').bind('click', showShadowboxPost);

哪个功能：

    var showShadowboxPost = function() {

    // Unbind click handler
    $j(this).unbind('click', showShadowboxPost);

    // Variables for ajax request
    var postData = {
        'postId':     $j(this).attr('data-id'),
        'postType':   $j(this).attr('data-type'),
        'elementId':  $j(this).attr('id'),
        'prevPost':   $j(this).prev().attr('id'),
        'nextPost':   $j(this).next().attr('id')
    };

    preFadeIn();

    // If content already loaded, avoid ajax request
    // The following functions include the fadeIn
    if($j(this).children('.single-post').length !== 0) {
        preLoadedRequest(this)
    } else {
        ajaxRequest(postData, this)
    }

    // Rebind click handler
    $j(this).bind('click', showShadowboxPost);

    return false;
};

完整文件在这里：http ://www.clarkthomasny.com/wp-content/themes/cleanslate/js/shadowbox-post.js

HTML 基本上是这样的：

<div id="content">
  <div id="articles">
      <article class="shadowbox-link"></article>
      <article class="shadowbox-link"></article>
      <article class="shadowbox-link"></article>

      [etc..]

  </div>
</div>

这是它的页面：http: //www.clarkthomasny.com/

我尝试了几种不同的方式来调试它，但我仍然不确定发生了什么，并认为它一定与将点击处理程序绑定到这么多元素有关？我已经使用 jQuery 几年了，我很难过，请帮忙。谢谢！

4

2 回答 2

0

使用本机 DOM 处理程序

document.getElementById('anchorID').onclick=function(){/* some code */}
于 2013-08-27T01:10:03.767 回答
0

对不起！该错误与我发布的代码无关。另一个文件包含所有链接的点击处理程序（我知道这是个坏主意），我不小心将它绑定了两次。因此累积的缓慢。感谢大家的帮助！

于 2013-08-27T20:34:00.507 回答