jQuery的点击功能是不是在div容器内工作，DIV

Question

在外打工创建一个应用程序，在点击事件和功能无法正常工作div中元素的父DIV HTML正常工作是

<div class="chat_wrapper"> 
    <span class="fa fa-minus minimize"></span> 
     <div class="module" id="45-module" style="height: 316px;"> 
      <div class="top-bar"> 
       <div class="left"> 
        <span class="icon typicons-message"></span> 
        <h1 class="username">rudra-chat</h1> 
       </div> 
       <div class="right"> 
        <span class="fa fa-plus maximize" style="display:none"></span> 
       </div> 
      </div> 
      <ol name="log" id="45-log" class="discussion"></ol> 
      <div class="message" id="45-msg"> 
       <input type="text" name="message" id="message" onkeypress="sendmessage(this,event);"> 
      </div> 
     </div> 
    </div> 

我正在特林这一个点击数

$(document).ready(function(){ 
    $('.minimize').click(function() { 
     alert('sadg'); 
     $('.module').animate({ height: '30px' }, 500); 
     $('.minimize').hide(); 
     $('.maximize').show(); 
    }); 

    $('.maximize').click(function() { 
     $('.module').animate({ height: '316px' }, 500); 
     $('.minimize').show(); 
     $('.maximize').hide(); 
    }); 
}); 

CSS代码

.chat_wrapper { 
    bottom: 0; 
    position: fixed; 
    right: 167px; 
} 
.module { 
    float: left; 
    margin-right: 2px; 
    width: 300px; 
} 
.top-bar:before { 
    animation: 1s ease 0s alternate none infinite running pulse; 
    background: radial-gradient(#ffffff, #000000) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    bottom: -100%; 
    content: ""; 
    left: 0; 
    opacity: 0.25; 
    position: absolute; 
    right: 0; 
    top: -100%; 
} 
.top-bar { 
    background: none repeat scroll 0 0 #666; 
    color: white; 
    overflow: hidden; 
    padding: 0.5rem; 
    position: relative; 
} 

，但它不工作没有错误我试过上的同样的功能chat_wrapper click event and this is working properly

Answer 1

好的，我解决了它。后面的问题是append（）。我被追加DIV，因为这是一个聊天应用程序和我认为这不以这种方式工作，所以我创建了一个简单的JavaScript函数这样

function minimize(e) 
{ 
    $(e).parents('.module').animate({ 
      height: '30px' 
     }, 500); 
     $(e).hide(); 
     $(e).next('.maximize').show(); 


} 
function maximize(e) 
{ 
    $(e).parents('.module').animate({ 
      height: '310px' 
     }, 500); 
     $(e).hide(); 
     $(e).prev('.minimize').show(); 


} 

和HTML这样

<div class="chat_wrapper"> 
    <div class="module" id="45-module" style="height: 316px;"> 
      <div class="top-bar"> 
       <div class="left"> 
        <span class="icon typicons-message"></span> 
        <h1 class="username">rudra-chat</h1> 
       </div> 
       <div class="right"> 
<span onclick="minimize(this)" id="minimize" class="fa fa-minus minimize"></span> 
        <span onclick="maximize(this)" style="display:none" class="fa fa-plus maximize"></span> 
       </div> 
      </div> 
      <ol name="log" id="45-log" class="discussion"></ol> 
      <div class="message" id="45-msg"> 
       <input type="text" name="message" id="message" onkeypress="sendmessage(this,event);"> 
      </div> 
     </div> 
    </div>