Question

I’m using jQuery and jQuery UI. When I submit a form ($(“#compareit”).submit(function(e){…), I hide my left and right columns on the page and show the AJAX results of the form submission. I’m also using some simple tooltips. The tooltips work fine prior to submitting the form…after submission, they stop working. I’m assuming it’s because I’m changing the DOM. Any idea on how to get around this?

I have way too much code to post, so here is the functionality. If code would be helpful, I would be happy to post it (below)

Submit form which does an ajax call.
Hide right/left columns on my page
Show results on page.
Tooltips stop working

The tooltip in question is:
$(‘.tTip’).betterTooltip({speed: 150, delay: 300});

$(document).ready(function(e) { 

    positions = new Array ('8' , '9');
    positions_num = 7;
    position_list = new Array(positions_num);

    $("#tabsP" ).tabs();
    $("#tooManySelected").hide();
    $('.tTip').betterTooltip({speed: 150, delay: 300});

    $("#compareit").submit(function(e){
        $("#topsection").hide();
        $("#tabsP").hide();
        $("#bottomWrap").hide(); 
        $("#error").html('');
        $("#leftcolumn").hide();
        $("#rightcolumn").hide();
        $("#yearChooser").hide();
        e.preventDefault();
        var queryString = $('#compareit').serialize();
        var dataString = queryString + "&count=" + totalselected;
        //alert(dataString);

        $.ajax({
            type: 'GET',
            url:'newmlbcompare2p.php', 
            cache: false,
            data: dataString,
            dataType : 'html',
            success:function(result){
                $('#ajaxDiv').html(result);
            }
        });
        return false; 
    });

    $( "#accordionRight" ).accordion({
        collapsible: true,
        autoHeight: false
    });
    $( "#accordionLeft" ).accordion({
        header: "h3", 
        autoHeight: false,
        navigation: true,
        collapsible: true,
        active: true
    })

    $(".btn-slide").click(function(){
        $("#ppanel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

}); 

Answer 1

If the tool tip inside the ajax is not working, because that content you loaded after binding your method to enable the tool tip. So the tool tip function is not aware of the new elements added. So you probably need to bind that function again to the new contents loaded. You can do so in your ajax success event after loading the data

$.ajax({
            type: 'GET',
            url:'newmlbcompare2p.php', 
            cache: false,
            data: dataString,
            dataType : 'html',
            success:function(result){
                $('#ajaxDiv').html(result);
                $('.tTip').betterTooltip({speed: 150, delay: 300});

            }
});

EDIT: The same thing applies to your other events also. Like you said, your click events are not working, You probable needs to change that to use jQuery on

Change

 $(".btn-slide").click(function() {
  //do stuff
 });

to

$("#yourContainerDiv").on("click", ".btn-slide", function(event){
     //do stuff
});

on will handle current elements and future elements(like what you loaded from ajax).

http://api.jquery.com/on/

jquery on is available from jQuery 1.7+ version onwards. If you are using previous version, you need to use jQuery live method