Question

I have a set of jQuery UI AJAX tabs that load individual .php pages when they are clicked. All of my styling, etc. conveys, because the pages that hold the tabs widget provide the already linked CSS, and scripts. When it comes to the actual pages that load when clicking on the tabs however, I can’t seen to get preventDefault() to work with .on() on these newly created DOM elements.

I’m using jQuery BBQ with my tabs so I can’t have “#”s being appended to the URL. This is caused when links within the tab panels are clicked.
I’ve been able to successfully use preventDefault() on DOM elements that are initially loaded, but not ones that are being fetched into the tabs widget via AJAX.

My function for a content toggler is…

$(function(){
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
    $(this).removeClass('clicked');
    $(this).prev().slideUp(500);
    $(this).html("Read More" + "<span class='moreUiIcon'></span>");
    }
    else {
    $(this).addClass('clicked');
    $(this).prev().slideDown(500);
    $(this).html("See Less" + "<span class='lessUiIcon'></span>");
    }       
}));
});

I’d like to combine the preventDefault() from this function into it.

// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links
$(".showMoreOrLess").click(function (event) 
{ 
 event.preventDefault(); 
 //here you can also do all sort of things 
});
 // /prevents default behavior on "showMoreOrLess" links

I’ve tried several ways using .on(“click”, function(work)), etc. I’ve used .on() in a separate function and also tried to combine it in the first function above. Does anyone know what I’m doing wrong? The code works on tab content that is static, just not content loaded via AJAX. Any help would be greatly appreciated. Can’t seem to figure this out. Thanks in advance.

Answer 1

$("body").on('click', ".showMoreOrLess", function(event) {
  event.preventDefault();
  var self = $(this);
  if (self.hasClass('clicked')) {
    self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500);
  }else {
    self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500);
  }
});