ハンドルコンテンツ

Question

私は、ユーザーのリストが含まれてい<li>

コード<ul>でユーザー名をクリックすると、クリックを受け取ったときに以下のコードは、チャットウィンドウを表示する必要があります持っている

<ul class="chat-contacts"> 
    <li class="online" data-user-id="USERCODE"> 
    <a href="#"> 
     <div class="media"> 
     <div class="media-body"> 
      <div class="contact-name">USERNAME</div> 
     </div> 
     </div> 
    </a> 
    </li> 
</ul> 

チャットウィンドウのコードです。 <ul>ウィンドウの静的コンテンツを表示すると、内容が動的である<ul>をフィードすると、クリックが機能しません。誰かが私を助けることができる？

<script id="chat-window-template" type="text/x-handlebars-template"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill"> 
     <a href="#" class="close"><i class="fa fa-times"></i></a> 
     <a href="#"> 
     <span class="pull-left"> 
      <img src="{{ user_image }}" width="40"> 
     </span> 
     <span class="contact-name">{{user}}</span> 
     </a> 
    </div> 
    <div class="panel-body" id="chat-bill"> 
    </div> 
     <form id="messageForm"> 
      <input id="nameInput" type="hidden" class="input-medium" value="Macbook" /> 
      <input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" /> 
     </form> 
    </div> 
</script> 

Answer 1

クリックイベントが機能していません。このイベントは要素が存在することを知らない。

これはjQuery('.chat-contacts li').click(function(){// do something})

を使用しているとき、私はこれでクリックイベントを設定しようと発生します

jQuery(document).on('click', '.chat-contacts li', function(){ 

}); 

イベントを設定onでは、リスト内の新しい要素をスキャンするためのjQueryを強制します。