Disable href and .click via jQuery

Question

i'm building a simple list filter using jQuery. I have some categories in div #filter and some items in div #itemlist. By clicking on an item (hyperlink) the content of the page gets loaded via .load into div #content below. When a category is selected, items not in this category get a class 'notactive' and are greyed out.

Now, the greyed out items should be non-clickable.

I've tried different approaches but none seem to work for me.

• removeAttr('href') doesn't work, because the .load function is still trying to fetch content
• same thing with preventDefault
• I tried .bind('click', false); but don't really know where to put it, as the items are all clickable on page load but get disabled later without reloading the page.

Here's my code to filter the items:

$('#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;
});

And here's the ajax-call that needs to be disabled/enabled as well:

$.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;
});

Thank you for any help!

Answer 1

After a quick glance at your code I think it would be enough to do the following:

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

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

Answer 2

I hope i get what you mean, but wouldn't checking for the notactive class do your job?

$("#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;
});