当我在 Angular 中加载动态组件时，jQuery 不工作

我已经在 Angular 中实现了动态组件，每当加载动态组件时，其相应的 jQuery 就无法工作。相同的 jQuery 脚本在其他地方工作。

这是我的动态组件加载的地方：

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

下面的html将被动态加载。

<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");
});


});

我已经检查过这个脚本，它在其他地方运行得很好。

请让我知道为什么会发生这种情况。

正如您已经说过的，html 是动态加载的。这意味着这个 html 还不存在$(document).ready(function() { ... })被执行。因此，您尝试向当时不存在的元素添加单击事件。
对于这种具体情况，有一种称为事件委托的东西。

而不是做

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

你会做

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

这样下面的任何元素document与类learn-more，现在或者将来，都会得到这个点击事件。