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

Question

我已经在 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");
});


});

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

请告诉我为什么会这样。

Answer 1

正如您自己所说，html 是动态加载的。这意味着当执行 $(document).ready(function() { ... }) 时，此 html 还不存在。因此，您正在尝试向当时不存在的元素添加点击事件。
对于这种确切情况，有一种称为事件委托(delegate)的东西。

而不是做

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

你会做

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

这样，document 下具有类 learn-more 的任何元素，无论现在还是将来，都将获得此点击事件。