JQuery Live() not working

Question

I have made an custom collapsible fieldset control in asp.net. I use jquery to add the toggle effects. The control works perfectly but when i am using my fieldsets inside an updatepanel, afer a postback i loose my jquery logic because of the document.ready.

Now i have read about the new Live() function of Jquery but i don't get it working. What do i do wrong? Has someone the answer??

Thanks a lot

My Jquery code is:

$(document).ready(function() {

    $.fn.collapse = function(options) {
        var defaults = { closed: false }
        settings = $.extend({}, defaults, options);

        return this.each(function() {
            var obj = $(this);

            obj.find("legend").addClass('SmartFieldSetCollapsible').live("click", function() {


                if (obj.hasClass('collapsed')) { 
                obj.removeClass('collapsed').addClass('SmartFieldSetCollapsible'); }

                $(this).removeClass('collapsed');

                obj.children().next().toggle("slow", function() {

                    if ($(this).is(":visible")) {

                        obj.find("legend").addClass('SmartFieldSetCollapsible');
                        obj.removeAttr("style");
                        obj.css({ padding: '10px' });
                        obj.find(".imgCollapse").css({ display: 'none' });
                        obj.find(".imgExpand").css({ display: 'inline' });

                    }
                    else {

                        obj.css({ borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'transparent', borderWidth: '1px 0px 0px 0px', paddingBottom: '0px' });
                        obj.find(".imgExpand").css({ display: 'none' });
                        obj.find(".imgCollapse").css({ display: 'inline' });

                    }
                });
            });

            if (settings.closed) {
                obj.addClass('collapsed').find("legend").addClass('collapsed');
                obj.children().filter("p,img,table,ul,div,span,h1,h2,h3,h4,h5").css('display', 'none');
            }
        });
    };


});


$(document).ready(function() {

$("fieldset.SmartFieldSetCollapsible").collapse();

});

Answer 1

The problem is that you are doing more then just a plain selector for your live selection

From api.jquery.com "DOM traversal methods are not fully supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selecton"

Answer 2

            if (obj.hasClass('collapsed')) { 
            obj.removeClass('collapsed').addClass('SmartFieldSetCollapsible'); }

            $(this).removeClass('collapsed');

First you want to remove the class an add another class if it has the class collapsed, an then you remove the class collapsed. I don't know if it affects the working of the system but it is worth to try.

Does the function work if you just use .click (when the field aren't updated)?