通过 jQuery 禁用 href 和 .click

Question

我正在使用 jQuery 构建一个简单的列表过滤器。我在 div #filter 中有一些类别，在 div #itemlist 中有一些项目。通过单击某个项目（超链接），页面内容将通过 .load 加载到下面的 div #content 中。选择类别后，不属于该类别的项目将获得“notactive”类别并显示为灰色。

现在，灰色项目应该是不可点击的。

我尝试过不同的方法，但似乎没有一个对我有用。

• removeAttr('href') 不起作用， 因为.load函数仍然是 尝试使用 preventDefault 获取内容
• 相同的
• 内容我尝试了 .bind('click', false); 但是 真的不知道该把它放在哪里，因为 页面上的项目都是可点击的 加载但稍后被禁用而无需 重新加载页面。

这是我过滤项目的代码：

$('#filter li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).attr('class');
// reset the active class on all the buttons
$('#filter li').removeClass('current');
// update the active state on clicked button
$(this).parent().addClass('current');
if(ourClass == 'all') {
  // show all items
  $('#itemlist').children('li').removeClass('notactive');
}
else {
  // hide all elements that don't share ourClass
  $('#itemlist').children('li:not(.' + ourClass + ')').addClass('notactive');
  // show all elements that do share ourClass
  $('#itemlist').children('li.' + ourClass).removeClass('notactive');
}
return false;
});

这里也是需要禁用/启用的 ajax 调用：

$.ajaxSetup({cache:false});
$("#itemlist a").click(function(){
  var $itemlink = $(this).attr("href");
  $("#content").html('<p><img src="ajax-loader.gif" /></p>');
  $("#content").load(""+$itemlink+" #content > *");
return false;
});

感谢您的帮助！

Answer 1

快速浏览一下您的代码后，我认为执行以下操作就足够了：

$('#itemlist a').click(function() {
    if ($(this).hasClass("notactive")) {
        return false;
    }

    // The rest of your code
    ...
});

Answer 2

我希望我明白你的意思，但是检查 notactive 类不会做你的工作吗？

$("#itemlist a").click(function(e){
 e. preventDefault();
 if(!$(this).hasClass('notactive')) {
   var $itemlink = $(this).attr("href");
   $("#content").html('<p><img src="ajax-loader.gif" /></p>');
   $("#content").load(""+$itemlink+" #content > *");
 }
 return false;
});