javascript - 继承导致函数被执行很多次Javascript

Question

我正在学习 JavaScript，但在创建一个最小化窗口的函数时遇到了困难。问题是这个函数本身似乎堆叠了很多次。

Gere 是我的主要职能:

function displayChatWindow(user, status, avatar, id){
    var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar, userId: id});
    stackingWidth = stackingWidth - boxWidth;
    console.log(stackingWidth);
    $("body").prepend(template);
    $(".messages-container").slimScroll({
        height: '200',
        size: '10px',
        position: 'right',
        color: '#535a61',
        alwaysVisible: false,
        distance: '0',
        railVisible: true,
        railColor: '#222',
        railOpacity: 0.3,
        wheelStep: 10,
        disableFadeOut: false,
        start: "bottom"     
    });
     $("#" + id).css({
        top: absoluteY,
        left: stackingWidth
    });
    $(".minimize-others").on("click", displayOthersChat);
    $(".chat input, .chat textarea").on("focus", cleanInputs);
    $(".chat input, .chat textarea").on("blur", setInputs);
} 

此函数接收一些参数并使用模板创建聊天窗口。最后，它应用函数来最小化窗口 (displayOthersChat) 并为每个窗口加载插件和内容。

我的 displayOtherChats 函数:

function displayOthersChat(e){
        /*e.preventDefault();*/
    var This = $(this).parent().parent();
    var minimize = This;
    if(!This.hasClass("draggable")){
        This.animate({
            top: windowHeight - boxHeight - 20
        });
        This.addClass("draggable");
        This.draggable({handle: ".header"});
        var timeOut = setTimeout(function() {
            This.find(".minimize").toggleClass("rotate");
        }, 500);
    }else{
        This.draggable("destroy");
        This.removeClass("draggable");
        var timeOut = setTimeout(function() {
            This.find(".minimize").toggleClass("rotate");
        }, 500);
        This.animate({
            top: absoluteY
        });
    }
     /*return false;*/
}

这似乎工作得很好。如果我打开我的第一个窗口，它会显示并最小化窗口。当我打开另一个窗口时，最后一个窗口正常工作，但当我尝试将其最小化时第一个窗口打开。

好像调用了两次函数，如果我打开第三个窗口，第一个窗口调用函数三次。

我真的不知道发生了什么，如果你们能帮助我，我将不胜感激。我还留下了一个链接，这样你们就可以看到发生了什么:http://s3.enigmind.com/jgonzalez/nodeChat .

Answer 1

问题似乎是您一遍又一遍地将相同的事件处理程序绑定(bind)到相同的元素。

$(".minimize-others").on("click", displayOthersChat); 会将 displayOthersChat 绑定(bind)到所有现有元素使用类 minimize-others。 .on 始终添加 事件处理程序，而不是替换它们。因此，如果您多次调用 displayChatWindow，就会多次将事件处理程序绑定(bind)到 .minimize-others 元素。

您只想将处理程序绑定(bind)到刚刚创建的窗口，例如:

// create reusable jQuery object from HTML string.
var $template = $(template).prependTo('body');
// instead of $("body").prepend(template);
// ...
$template.find('.minimize-others').on('click', displayOthersChat);

其他事件处理程序也是如此。

---

或者，您可以一次绑定(bind)事件处理程序，在函数之外并使用event delegation捕获事件:

$(document.body).on('click', '.minimize-others', displayOthersChat);