Jquery On（）'点击'处理每件事情？ [英] Jquery On() 'click' working on every thing?

问题描述

你好我有一个让我疯狂的问题:(
无法弄明白为什么

Hello I have a problem which drive me crazy :( couldnt figure it out why

这里是我的HTML和Mustache

here is my HTML and 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（），我试图将click函数绑定到动态生成的.nextSlide标签，但它适用于整个父级（#slideShow）
我缺少什么？

THE FIDDLE

推荐答案

改变这个：

    this.$el.on('click', this.$next, function(){
        alert('sdsd')
    })

到此：

    this.$el.on('click', '.nextSlide', function(){
        alert('sdsd')
    })

这篇关于Jquery On（）'点击'处理每件事情？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！