JQuery Live() 不起作用

Question

我在asp.net中创建了一个自定义可折叠的fieldset控件。我使用jquery添加切换效果。该控件运行良好，但当我将它放在updatepanel内时，由于document.ready，我的jquery逻辑会丢失。

现在我已经了解了Jquery的新Live()函数，但我无法让它工作。我做错了什么？有人有答案吗？

非常感谢！

我的Jquery代码是：

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

});

- Talsja

---

+1 我喜欢使用箭头（折叠/展开）通过边框宽度完全使用CSS的想法。 - adardesign

你确定 live() 函数被调用了吗？ - RamboNo5

Answer 1

问题在于，您正在执行的不仅是普通选择器，而是动态选择器。

来自api.jquery.com： “DOM遍历方法不完全支持用于查找元素的.live()。相反，.live()方法应总是直接调用选择器后。”

- PetersenDidIt

---

+1 谢谢，我一直对 live() 方法有问题，这是一个好东西要知道！ - adardesign

如果你考虑一下的话，这就有意义了... live 应该在事件发生时检查目标元素是否与特定选择器匹配，而不是在调用时检查。 $() 包装实际上代表了在创建时匹配的元素列表；你可以在它上面调用 live() 来重新定义它创建时使用的选择器，这是一个彻头彻尾的 hack。这是糟糕的、具有误导性的 API 设计！它应该被称为 $.live(selector, eventType, handler)。 - bobince

这正是我的问题，谢谢Petersen。缓存选择器通常更可取，因为您不必再次查询dom，但会给.live()带来麻烦。不要像我一样这样做，它不起作用： $("dd", this._$element).live("click", function (event) {}); - SimplGy

Answer 2

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

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

首先，如果它有collapsed类，您需要删除类并添加另一个类，然后删除collapsed类。我不知道它是否会影响系统的工作，但值得一试。

如果字段未更新，只使用.click函数是否有效？

- dododedodonl

---

大家好， live（不会被调用。所以这个方法不起作用。我通过使用一个隐藏字段解决了这个问题。在这个字段中，我跟踪哪个fieldset是打开还是关闭的。现在一切都正常工作了。感谢大家的回复。问候 Talsja - Talsja

Answer 3

遍历是问题所在。您可以通过简单的选择来解决它。

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

- kaimnryu