Question

我正在进行类似Facebook的聊天。我想实现在您单击聊天栏时显示/隐藏聊天的功能，但是当您单击.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>

您可以在http://live-pin.com中看到现场演示。

Answer 1

事件“冒泡”了DOM层次结构。

正确的方法是将点击事件分配给标题栏div（#chat_system_msg_nick）而不是空洞聊天框。

Answer 2

使用

$('.hidden_box #chat_system_msg_nick').live("click", function(){ showChat('#chat_system_msg_lp'); });
$('.active_box #chat_system_msg_nick').live("click", function(){ hideChat('#chat_system_msg_lp'); });

并删除Javascript的最后一部分。

另外，请不要重新发布问题。如果您要添加/更改任何内容，只需编辑原始问题，

禁用默认函数jquery

2 个答案: