Javascript 余烬onClick事件未完成操作
我正在开发一个Ember应用程序,但我在处理DOM和组件时遇到了麻烦。我有一个Javascript 余烬onClick事件未完成操作,javascript,jquery,dom,ember.js,Javascript,Jquery,Dom,Ember.js,我正在开发一个Ember应用程序,但我在处理DOM和组件时遇到了麻烦。我有一个公司扩展器组件,它将显示数据库中的每个公司,并将展开以显示公司中可用的工作: //companies.hbs <h1>Companies</h1> {{#each model as |company| }} {{company-expander name=company.name url=company.url address=company.address positions=compa
公司扩展器
组件,它将显示数据库中的每个公司
,并将展开以显示公司中可用的工作:
//companies.hbs
<h1>Companies</h1>
{{#each model as |company| }}
{{company-expander name=company.name url=company.url address=company.address positions=company.positions}}
{{/each}}
{{outlet}}
组件成功加载并提取公司名称。问题在于,单击第一个项目时,click only会进行注册,并在返回多少公司记录时注册单击次数。div的类也不会被切换。您不应该使用“getElementById”,除非该ID在任何特定页面中都不是唯一的。在您的例子中,由于组件位于每个循环中,因此重复相同的元素ID
将ID替换为类在这里有效。下面是一个工作示例。
<div class="expander">
<a href="javascript:void(0)" id="js-expander-trigger" class="expander-trigger expander-hidden">{{name}}</a>
<div id="js-expander-content" class="expander-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
import Ember from 'ember';
export default Ember.Component.extend({
_setup: Ember.on('didInsertElement', function() {
console.log("doc ready");
var expanderTrigger = document.getElementById("js-expander-trigger");
var expanderContent = document.getElementById("js-expander-content");
$('#js-expander-trigger').click(function(){
console.log("click");
$(this).toggleClass("expander-hidden");
});
})
});