javascript - 防止在使用 ajax 添加对象时将效果应用于同一对象两次

Question

我正在制作的应用程序有一点问题。我有一个页面，用户可以通过将模块拖到页面或“ Canvas ”区域来编辑文档。

http://thinktankdesign.ca/temp_img.jpg

加载页面时，javascript 使模块可折叠(如上)。但是，在用户拖入新模块后，效果会再次应用，一些新模块也会折叠。这是问题所在。每次加载一个模块时，相同的效果就会应用到已经可以折叠的模块上。它最终破坏了他们的动画。

这是在页面加载时执行的代码。

//make colapsible
$("h1.handle").click(function() {
    var object = $(this);
    v$(this).next().toggle("fast", colapsible_class(object));
    vreturn false;
}).addClass("open");

下面是通过 ajax 创建模块时执行的代码

function get_module(id){
    var template = $('input[name=template]').val();
    $.post(window.location.href, { template: template, module: id, mode: 'create' },
        function(data){
            $(data).insertBefore(".target_wrapper");

            //enable deletion of module
            $(".js_no_modules").slideUp("slow");
            $(enable_module_deletion());

            //show delete button
            $("button[name=delete]").show();

            //make colapsible
            $("h1.handle").click(function() {
                var object = $(this);
                $(this).next().toggle("fast", colapsible_class(object));
                return false;
            }).addClass("open");

        }
    );
}

我需要一种可靠的方法来防止将切换效果应用于同一模块两次

Answer 1

使用 jQuery 1.3 live events相反。

//make colapsible
$("h1.handle").live("click", function() {
    var object = $(this);
    v$(this).next().toggle("fast", colapsible_class(object));
    vreturn false;
}).addClass("open");

然后删除第二个代码块中的点击声明，将其更改为$("h1.handle").addClass("open");

实时事件将所有当前和 future 匹配元素与一个事件绑定(bind)。