静的コンテンツのjqueryイベント委譲が機能しない

Question

JQueryイベントの委任は静的コンテンツでは機能しませんが、動的に追加された要素では完全に機能します。 Alert（ 'test'）は、動的に追加されたdivでは完全に機能しますが、すでに存在する静的divでは機能しません。

$(document).ready(function() { 
 
     $('.addPost').on('click', function() { 
 
      console.log("hello"); 
 

 
      var dyanamicdiv = 
 
      ' <div>'+ 
 
      '  <div class="click-delgated-event">'+ 
 
      '   hello'+ 
 
      '  </div>'+ 
 
      ' </div>'; 
 

 
      $('.post-container').append(dyanamicdiv); 
 

 
     }); 
 
     $('.post-container').on('click', '.click-delgated-event', function() { 
 
     alert("test"); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="post-container"> 
 
    <div> 
 
     <div class="click-delgated-event"> 
 
      hello 
 
     </div> 
 
    </div> 
 
</div> 
 
<button class="addPost" type="button" name="button"> ADD POST </button>

Answer 1

それはので、あなたが（あなたのコード内であなたのようなクラスと静的な要素を持っている静的な要素クラスに欠けている-のだ：click-delgated event、あなたが持つ要素をターゲットにしていますお使いのjQueryのコード内のクラスclick-delgated-event）：

$(document).ready(function() { 
 
    $('.addPost').on('click', function() { 
 
    console.log("hello"); 
 

 
    var dyanamicdiv = 
 
     ' <div>' + 
 
     '  <div class="click-delgated-event">' + 
 
     '   hello' + 
 
     '  </div>' + 
 
     ' </div>'; 
 

 
    $('.post-container').append(dyanamicdiv); 
 

 
    }); 
 
    $('.post-container').on('click', '.click-delgated-event', function() { 
 
    alert("test"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="post-container"> 
 
    <div> 
 
    <div class="click-delgated-event"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div> 
 
<button class="addPost" type="button" name="button"> ADD POST </button>

Answer 2

以下のようなあなたのdivのクラス名に

を-を追加します。

<div class="click-delgated-event"> 
    hello 
</div> 

間違っ-してクラス名に

含まれていないので、その作業を適切に

Answer 3

<div class="click-delgated event">であなたを逃した-それは

<div class="post-container"> 
    <div> 
     <div class="click-delgated-event"> 
      hello 
     </div> 
    </div> 
</div>