CODEWITHSUNDEEP
jqueryfilterpreventdefault
Christoph
Christoph

Reputation: 543

Disable href and .click via jQuery

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.

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!

Upvotes: 0

Views: 2100

Answers (2)

mekwall
mekwall

Reputation: 28974

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

Upvotes: 2

Chris
Chris

Reputation: 1058

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

Upvotes: 0

Related Questions