我有一个让我发疯的问题:( 想不通为什么!
这是我的 HTML 和 Mustache
<section id="slideShow">
<script id="slideShow-template" type="text/template">
<ul>
{{#slideShow}}
<li class="{{{class}}}">
<img src="{{{img}}}" alt="{{{title}}}">
<a href="{{{link}}}">
<h1 class="slideShowTitle">{{title}}</h1>
<p class="slideShowDate">{{date}}</p>
<p class="slideShowDetail">{{detail}}</p>
</a>
</li>
{{/slideShow}}
</ul>
<nav>
{{#slideShow}}
<a href="javascript:;"></a>
{{/slideShow}}
</nav>
<a href="javscript:void(0)" class="prevSlide"></a>
<a href="javscript:void(0)" class="nextSlide"></a>
</script>
</section>
这是JS
(function() {
var slideShow = {
slideShow: [
],
init: function() {
this.cacheDom();
this.bindEvents();
this.render();
},
bindEvents: function() {
this.$el.on('click', this.$next, function(){
alert('sdsd')
})
},
render: function() {
var data = {
slideShow: this.slideShow
};
this.$el.html(Mustache.render(this.template, data));
},
cacheDom: function() {
this.$el = $('#slideShow');
this.$ul = this.$el.find('ul');
this.$li = this.$ul.find('li');
this.$nav = this.$el.find('nav');
this.$a = this.$nav.find('a');
this.$next = this.$el.find('.nextSlide');
this.$prev = this.$el.find('.prevSlide');
this.template = $('#slideShow-template').html();
}
};
slideShow.init();
})();
正如您在 bindEvents()
中看到的那样,我试图将点击功能绑定(bind)到动态生成的 .nextSlide
标签,但它适用于整个父级 ( #slideShow
)
我错过了什么?
最佳答案
改变这个:
this.$el.on('click', this.$next, function(){
alert('sdsd')
})
为此:
this.$el.on('click', '.nextSlide', function(){
alert('sdsd')
})
关于javascript - Jquery On() 'click' 处理每件事?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53601023/