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

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

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

Answer 2

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

如果您只想让它存在一次，请使用one()^(docs)方法将其绑定。

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

首次点击后它将自动解除绑定。

Answer 3

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

要删除事件绑定，请在点击功能中执行以下操作：

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

链接单击后删除了Jquery类，但仍然可以识别第二次单击

3 个答案: