JQuery Live () not working

In asp.net, I created a custom fieldset collapsible control. I am using jquery to add switching effects. The control works fine, but when I use my fields inside the update panel, open the postback, I will lose the jquery logic due to the document.

Now I read about the new Live () function of jQuery, but I am not getting its work. What am I doing wrong? Does anyone have an answer?

thanks a lot

My jQuery code:

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

});
+5
source share
3 answers

The problem is that you do more than just a simple selector for your live choice.

api.jquery.com " DOM .live(). , .live() selecton"

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

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

, , , , . , , .

, .click( )?

+2

Moving is a problem. You can solve this with a simple selection.

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

All Articles