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

其他事件处理程序也一样。

或者，您可以绑定事件处理程序一次，在外部并使用event delegation来捕获事件：

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

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

1 个答案: