Question

I have been trying to manipulate content that is loaded into jQuery UI tabs via AJAX.
As you can imagine, these elements are “future” DOM elements and aren’t manipulated by normal $(“.someClass”)functions.

I’ve read using .live() for event handling is now deprecated using jQuery 1.7+ and is replaced by the new .on() method.

My issue is that the div I want to hide, when it loads in an AJAX tab, must be manipulated after the initial DOM load and is not bound to a click event at first.

My functions, which are currently wrapped in $() are below.

I think I have the syntax correct for links that use a click handler, but I’m not sure of the correct way to “.hide()” my “hiddenStory” div at load.

I also think that the functions themselves shouldn’t be wrapped in an overall $()?

Any help or advice would be greatly appreciated.

$(function(){
    // this .hiddenStory div below is what I want to hide on AJAX load
    // need syntax and/or new methods for writing this function
$(".hiddenStory").hide();

   // this is a function that allows me to toggle a "read more/read less" area
   // on the "hiddenStory" div
$(".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>");
    }       
}));
});

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

Answer 1

Could you set the display: none via CSS and override it when you wanted to show the element’s content? Another option, if you have to do it this way would be to add the `$(“.hiddenStory”).hide() in the callback from the AJAX load that is populating the element. For example:

$(".hiddenStory").load("http://myurl.com", function(){
        $(".hiddenStory").hide();
    }
);

If you aren’t using the .load method, you should have some sort of call back to tie into (e.g. success if using $.ajax…)