JQuery Live() not working

Question

Dear all,

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

            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)?

Answer 2

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 3

traversing is the issue and you can solve it with a simple selection. you could do this

var obj = $(this),
    obj.find("legend").addClass('SmartFieldSetCollapsible');
$('legend.SmartFieldSetCollapsible').live('click.collapsible', function(e){

hope it helps. Cheers