用JavaScript顯示和隱藏瀏覽器聊天框

Question

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

Answer 1

使用

$('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()函數絕對是首選。你仍然可以通過使用相同的選擇器來進行「實時」，但是除非你使用的是真正舊版本的jQuery。