CODEWITHSUNDEEP
javascriptajaxjquery-uitabspreventdefault
Dick Kirkland
Dick Kirkland

Reputation: 119

using preventDefault() with on() in jQuery AJAX tabs

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.

Upvotes: 0

Views: 1786

Answers (2)

Eric Hodonsky
Eric Hodonsky

Reputation: 5897

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

Upvotes: 0

Tobias Krogh
Tobias Krogh

Reputation: 3932

the part $(".showMoreOrLess").click just applies to already accessable links on your page

try to use event delegation (here the clicks are captured on an every time existing element and you just pass the selector it is watching for... as a nice side effect you save listeners

$(document).on("click", ".showMoreOrLess", function(event) {
  event.preventDefault(); 
  //here you can also do all sort of things 
});

rather than document use a certain id from your page $("#myContainerId") (EDIT: of course the elements you are clicking on need to be inside of the element with the id)

Upvotes: 1

Related Questions