0

I'm making a Facebook-like chat. I want to implement the function that shows/hides the chat when you click the chatbar but not when you click on .chat_txt or .chat_new_input. Do you know any tricks?

//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>

You can see the live demo in http://live-pin.com.

casperOne
  • 73,706
  • 19
  • 184
  • 253
Luis
  • 1,067
  • 1
  • 14
  • 25
  • possible duplicate of [Return False jQuery Click()](http://stackoverflow.com/questions/9243753/return-false-jquery-click) – Rob W Feb 11 '12 at 21:33
  • 1
    Please do not post the same question more than once. If you have new information to add, edit the question via the edit link, located at the bottom of the question. – Rob W Feb 11 '12 at 21:33
  • dude why would you post the same question twice? I actually wasted 1 minute of my life trying to answer it here, to see that something similar was answered on your dup question. : – Vlad Nicula Feb 11 '12 at 21:41

2 Answers2

1

The events "bubble" up the DOM hierarchy.

The correct way would be to assign the click events to titlebar div (#chat_system_msg_nick) instead of the hole chatbox.

remy
  • 1,511
  • 10
  • 15
  • http://stackoverflow.com/questions/9242490/apply-a-jquery-function-live-in-1-object <--- I describe it **THERE** – Luis Feb 11 '12 at 23:02
1

Use

$('.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'); });

and remove the last part of the Javascript.

Also, please don't repost questions. If you have anything to add/change, just edit the original question,

skimberk1
  • 2,064
  • 3
  • 21
  • 27