動的コンポーネントを角でロードするときにjQueryが機能しない

Question

動的コンポーネントをAngularで実装していて、動的コンポーネントが読み込まれるときに対応するjQueryが機能しないときはいつでも。同じjQueryスクリプトは他の場所で働いています。 HTML以下

<div class="listing-table-outer" [@myAwesomeAnimation]='state'> 
     <app-dynamic-question [componentData]="componentData"></app-dynamic-question> 
    </div> 

動的にロードされます。私の動的コンポーネントのロードがどこ

です。

<div class="panel panel-default " > 
    <div class="panel-body" > 
    <h1>{{textLabel}}</h1> 
     <p>{{textHeader}}</p> 

     <div class="form-inline display-one" role="form"> 
      <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder=""> 
     </div> 

     <div class="learn-more magtop10"> 
      <a> <i class=" glyphicon glyphicon-play"></i> Learn More</a> 
     </div> 
     <div class="display_advance"> 
      <div class="well"> 
       <p>{{textFooter}}</p> 
      </div> 
     </div> 
     <div class="bs-component"> 
      <a href="#" class="btn panel-theme-clearbutton btn-lg" *ngIf="this.showButton[0].txt_button == 'Clear'">Clear</a> 
      <a href="#" class="btn panel-theme-clearbutton btn-lg" *ngIf="this.showButton[1].txt_button == 'Skip'">Skip</a> 
      <a href="#" class="btn panel-theme-button btn-lg" *ngIf="this.showButton[2].txt_button == 'Continue'">Continue</a> 
     </div> 
    </div> 
</div> 

私はこのスクリプトをチェックして、それは完全に別の場所で作業しているこのスクリプト

$(document).ready(function(){ 
$('.learn-more').click(function() { 

    $('.display_advance').slideToggle('1000'); 
    $("i", this).toggleClass(" glyphicon-play glyphicon-triangle-bottom"); 
}); 


}); 

を書かれています。

なぜこのようなことが起こっているのか教えてください。

Answer 1

あなた自身がすでに述べたように、htmlは動的に読み込まれます。つまり、$(document).ready(function() { ... })が実行されると、このhtmlはまだ存在しません。したがって、その時点で存在しない要素にクリックイベントを追加しようとしています。
このような状況では、イベント委任と呼ばれることがあります。

代わりの

$('.learn-more').on('click', function() { ... }); 

をやって、あなたはこの道にクラスlearn-moreとdocument、現在または将来において、以下のいずれかの要素を

$(document).on('click', '.learn-more', function() { ... }); 

を行うだろう、このクリックイベントを取得します。