使用JavaScript显示和隐藏浏览器聊天框

时间:2012-02-11 20:23:17

标签: javascript jquery event-handling

我在Javascript中创建一个浏览器聊天窗口。我想在你点击聊天栏时执行显示和隐藏聊天的功能,但是当你点击.chat_txt.chat_new_input

时不执行该功能

是否可以这样做?

//JavaScript Show/Hide Function
$('.hidden_box').live("click", function(){ showChat(this); });
$('.active_box').live("click", function(){ hideChat(this); });

$('.chat_txt').click(function(event) {
  event.preventDefault();
});

以下是DIV的语法:

<div id="chat_system_msg_lp" class="chat_box clickable_box hidden_box">
    <div id="chat_system_msg_nick" class="chat_name">system_msg</div>
    <ul id="chat_system_msg_txt" class="chat_txt">
        <li id="46">Hi visitor. We suggest you to sign in/sign up in order 
         to have all the benefits from Live-Pin </li>
    </ul>
    <form class="chat_new_message" name="new_msg">
       <input type="text" placeholder="Enter your message..." 
         class="chat_new_input">
    </form>
</div>

1 个答案:

答案 0 :(得分:2)

使用

$('body').on('click', '.hidden_box:not(.chat_box)', function() { showChat(this); });

如果您使用的是jQuery 1.7+。较旧的jQuery:

$('body').delegate('.hidden_box:not(.chat_box)', 'click', function() { showChat(this); });

当然对另一个人而言。

编辑 - 我应该进一步解释。 .live() API是个坏主意,因为大约1.4,.delegate()函数绝对是首选。您仍然可以使用相同的选择器使用“live”来执行此操作,但除非您使用的是非常旧版本的jQuery,否则不要这样做。