用JavaScript显示和隐藏浏览器聊天框 [英] Show and hide a browser chat box with JavaScript

问题描述

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

是否可以这样做？

  // JavaScript显示/隐藏函数
 $（'。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_lpclass =chat_box clickable_box hidden_​​box> 
< div id =chat_system_msg_nickclass =chat_name> system_msg< / div> 
< ul id =chat_system_msg_txtclass =chat_txt> 
< li id =46>嗨访客。我们建议您以
的顺序登录/注册，以获得Live-Pin< / li>的所有优势。 
< / ul> 
< form class =chat_new_messagename =new_msg> 
< input type =textplaceholder =输入您的消息...
 class =chat_new_input> 
< / form> 
< / div> 
  

解决方案

使用

$ b $（$ {code $ c'$''''''''）（'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，否则不要使用。

I am making a browser chat window in Javascript. I want to execute the function that shows and hides the chat when you click the chatbar, but not execute the function when you click on .chat_txt or .chat_new_input

Is it possible to do this?

//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();
});

Here is the syntax for the 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>

解决方案

Use

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

if you're on jQuery 1.7+. Older jQuery:

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

Similarly of course for the other one.

edit — I should have explained further. The .live() API was kind-of a bad idea, and since around 1.4 the .delegate() function was definitely preferred. You could still do it with "live" using the same selector, but don't unless you're on a really old version of jQuery.

这篇关于用JavaScript显示和隐藏浏览器聊天框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！