デフォルト機能を無効にするjquery

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

使用

$('.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の最後の部分を削除します。

また、質問を再投稿しないでください。追加/変更するものがある場合は、元の質問を編集するだけです。

Answer 2

イベントはDOM階層を「バブル」します。

正しい方法は、チャットボックスの代わりにタイトルバーdiv（#chat_system_msg_nick）にクリックイベントを割り当てることです。