繼承導致函數執行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

問題似乎是你一遍又一遍地將相同的事件處理程序綁定到相同的元素。

$(".minimize-others").on("click", displayOthersChat); 將displayOthersChat綁定到所有現有元素，並使用類minimize-others 。 .on總是添加事件處理程序，它不會替換它們。 因此，如果多次調用displayChatWindow ，則會多次將事件處理程序綁定到.minimize-others元素。

您只想將處理程序綁定到剛剛創建的窗口，例如：

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

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

---

或者，您可以在函數外部綁定事件處理程序一次 ，並使用事件委派來捕獲事件：

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