Создание элемента и назначение обработчика событий через jQuery - PullRequest
Новая
       13

Создание элемента и назначение обработчика событий через jQuery

1 голос
/ 11 февраля 2012

Я создаю чат в стиле Facebook.Он получает последние сообщения «Not Read» из файла JSON и добавляет текст к элементу «UL» через «LI» в поле.Если поле не существует, оно создает и прикрепляет текст.Я хочу, чтобы, когда я щелкаю по этому div, он скрывался с использованием отрицательного поля margin-bottom, а когда я щелкаю по нему снова, он показывает Margin-Bottom: 0.Пожалуйста, помогите мне, потому что это просто не работает.Что происходит, когда я нажимаю на поле, оно просто не показывает / скрывает, как это должно быть. 

    function showChat(id){
    $(this).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").removeAttr('onclick').click(function(){
           hideChat(Id);
        });

    }
    function hideChat(id){
    $(this).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").click(function(){
           showChat(Id);
        });

    }

    function getOnJSON(){

    var from;var to;var msg_id;var msg_txt;var new_chat_string;

    //Getting the data from the json file
    $.getJSON("/ajax/chat.json.php",function(data){

    $.each(data.notif, function(i,data){

    from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;

            if ($("#chat_"+from+"_lp").length === 0){
           new_chat_string = '<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="'chat_+from+'_nick" class="chat_name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>';
            $("#boxes").append(new_chat_string);    
            $('#chat_'+from+'_lp').click(function() {showChat(this);});

        }else{

            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');
            $('#chat_'+from+'_lp').click(function() {showChat(this);});
        }
    });
});
}

Ответы [ 2 ]

0 голосов
/ 11 февраля 2012

Измените showChat и hideChat, как показано ниже. Вы передаете this из обработчика click, но не используете его должным образом. Также вместо использования removeAttr('onclick') используйте unbind('click'). 

    function showChat(obj){
        $(obj).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").unbind('click').click(function(){
           hideChat(this);
        });

    }
    function hideChat(obj){
        $(obj).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").unbind('click').click(function(){
           showChat(this);
        });
    }
0 голосов
/ 11 февраля 2012

Изменение было внесено в функцию getOnJSON и вызовы shoqwChat

function showChat(id){
    $(this).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").removeAttr('onclick').click(function(){
           hideChat(Id);
        });

    }
    function hideChat(id){
    $(this).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").click(function(){
           showChat(Id);
        });

    }

    function getOnJSON(){

    var self = this;     // Added this line, as this changes scope in each()
    var from;var to;var msg_id;var msg_txt;var new_chat_string;

    //Getting the data from the json file
    $.getJSON("/ajax/chat.json.php",function(data){

    $.each(data.notif, function(i,data){

    from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;

            if ($("#chat_"+from+"_lp").length === 0){
           new_chat_string = '<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="'chat_+from+'_nick" class="chat_name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>';
            $("#boxes").append(new_chat_string);    
            $('#chat_'+from+'_lp').click(function() {showChat(self);});

        }else{

            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');
            $('#chat_'+from+'_lp').click(function() {showChat(self);});
        }
    });
});
}
...