1

我正在学习 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 。

4

1 回答 1

4

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

$(".minimize-others").on("click", displayOthersChat);将使用 class绑定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);
于 2013-06-08T00:06:15.100 回答