链接单击后删除了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

该事件已绑定到该元素，您需要手动将事件与相关元素解除绑定 。 这可以通过调用$(this).unbind('click');来完成$(this).unbind('click'); 。

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

Answer 2

处理程序绑定到元素而不是选择器。

method to bind it. 如果只希望单击它存在，请使用one() 方法进行绑定。

$('a.loadable').one('click', function(){ 
    // and so on...

第一次单击后，它将自动解除绑定。

Answer 3

识别您的第二次单击的原因是因为jQuery已经将操作绑定到您的元素。 您不能仅通过删除类来取消绑定事件。 该类仅用于帮助您选择该元素（并设置您的元素的样式）。

要删除事件绑定，请在您的click函数中执行以下操作：

$('a.loadable').click(function() {
    ...your other code...
    $(this).unbind('click');
});