我已经在 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 是动态加载的。这意味着当执行 $(document).ready(function() { ... })
时,该 html 还不存在。因此,您尝试向当时不存在的元素添加点击事件。
对于这种具体情况,有一种称为事件委托(delegate)的东西。
而不是做
$('.learn-more').on('click', function() { ... });
你会做
$(document).on('click', '.learn-more', function() { ... });
这样,document
下面具有类 learn-more
的任何元素,无论现在还是将来,都将获得此点击事件。
关于javascript - 当我在 Angular 中加载动态组件时,jQuery 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44907504/