Наследование вызывает выполнение функции так много раз Javascript

Question

Я изучаю JavaScript, и я застрял, создав функцию, чтобы свести к минимуму окно. Проблема в том, что эти функции, как представляется, складываются в себе столько раз.

Гир моя главная функция:

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

То же самое касается других обработчиков событий.

---

В качестве альтернативы, вы можете связать обработчик события раз, вне функции и использовать event delegation для захвата события:

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