javascript - 点击链接后 Jquery 类被删除，但第二次点击仍然可以识别

Question

我遇到了一个小问题。我正在尝试使用 Jquery load() 函数使用 AJAX 加载页面上的内容。加载内容后，第二次点击链接，我需要加载内容以向上滑动/隐藏；当点击同一个链接 3 次以上时，我只需切换加载的内容显示，因为它已经加载过一次。

我的问题是，单击链接一次后，我删除了 loadable 类，但在第二次单击时，执行相同的函数，就好像该类仍然存在一样。这是我的 HTML:

<a title="Food" id="food" class="loadable" href="get-taste/food">Food</a>
<div class="food_load_space"></div>

链接触发加载并将数据加载到 .food_load_space 中。这是我的 JS:

$(document).ready(function(){
  $('a.loadable').click(function(){ //executed upon link click 1;
    url = $(this).attr('href');
    linkid = $(this).attr('id');
    toload = url + ' #content-area';
    //now, remove loadable, add loaded and expanded
    $(this).removeClass('loadable');
    alert(toload);
    $('.' + linkid + '_load_space').load(toload);
    return false;
  }); //kill loadable

我还计划添加一个 .expanded 类和一个 .loaded 类，以便脚本知道链接处于哪个状态。但是，即使 .loadable 类消失了。

Answer 1

事件已经绑定(bind)到元素上，需要手动unbind来自相关元素的事件。这可以通过调用 $(this).unbind('click'); 来完成。

您可能还希望检查该元素是否具有事件函数中的类。