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

发布于 2025-01-04 20:17:48 字数 1007 浏览 1 评论 0原文

我正在用 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>

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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一人独醉 2025-01-11 20:17:48

请使用

$('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,否则不要这样做。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文