ajax响应

Question

当我点击列表中的元素时，我有一个个人加载页面列表我显示它的信息;点击运行得非常好，但是当我点击一个按钮来过滤此列表，例如显示在此列表中时，开发者个人点击显示信息不会触发。

我忘了告诉你我已经这样做了

        $("ul").on("click", "li a", function() {
            console.log("clicked");
        });

但仍无法正常工作

            <ul class="mail-list">
                <li class="mail-list-item">
                    <a class="mail-list-link" href="#show">
                        <div class="mail-list-name">John</div>
                        <div class="mail-list-content">
                            <span class="mail-list-subject">Developer</span>
                        </div>
                    </a>
                </li>
                <li class="mail-list-item">
                    <a class="mail-list-link" href="#show">
                        <div class="mail-list-name">Mike</div>
                        <div class="mail-list-content">
                            <span class="mail-list-subject">Designer</span>
                        </div>
                    </a>
                </li>
            </ul>   

javascript

'use strict';

(function ($) {
'use strict';

var Mail = {
    Constants: {
        MEDIA_QUERY_BREAKPOINT: '992px'
    },
    CssClasses: {
        MAIL_LIST: 'mail-list',
        MAIL_LIST_ITEM: 'mail-list-item',
        MAIL_LIST_LINK: 'mail-list-link',
        MAIL_CONTENT: 'mail-content',
        ACTIVE: 'active',
        HOVER: 'hover'
    },
    init: function init() {
        this.$window = $(window);
        this.$list = $('.' + this.CssClasses.MAIL_LIST);
        this.$items = $('.' + this.CssClasses.MAIL_LIST_ITEM);
        this.$links = $('.' + this.CssClasses.MAIL_LIST_LINK);
        this.$content = $('.' + this.CssClasses.MAIL_CONTENT);
        this.$backBtns = this.$content.find('[data-toggle="tab"]');
        this.breakpoint = null;
        this.bindEvents();
    },
    bindEvents: function bindEvents() {
        this.$items.on('mouseenter.e.mail', this.handleItemMouseEnter.bind(this));
        this.$items.on('mouseleave.e.mail', this.handleItemMouseLeave.bind(this));

        this.$links.on('click.e.mail', this.handleLinkClick.bind(this));
        this.$links.add(this.$backBtns).on('shown.bs.tab', this.handleTabShown.bind(this));
        $("ul").on("click", "li a", function() {
            console.log("clicked");
        });
        this.breakpoint = window.matchMedia('(max-width: ' + this.Constants.MEDIA_QUERY_BREAKPOINT + ')');
        this.breakpoint.addListener(this.handleMediaQueryChange.bind(this));
    },
    handleItemMouseEnter: function handleItemMouseEnter(evt) {
        $(evt.currentTarget).addClass(this.CssClasses.HOVER);
    },
    handleItemMouseLeave: function handleItemMouseLeave(evt) {
        $(evt.currentTarget).removeClass(this.CssClasses.HOVER);
    },
    handleLinkClick: function handleLinkClick(evt) {
        var $link = $(evt.currentTarget),
        $item = $link.closest('.' + this.CssClasses.MAIL_LIST_ITEM);

        if ($item.hasClass(this.CssClasses.ACTIVE)) $item.removeClass(this.CssClasses.ACTIVE);

        this.rememberScrollbarPos();
    },
    handleTabShown: function handleTabShown(evt) {

        var $trigger = $(evt.currentTarget),
        $activeLink = this.getActiveLink();

        if (!$trigger.is($activeLink)) {
            this.scrollTo(this.rememberedScrollbarPos());
            } else {
            this.scrollTo(0);
        }
    },
    handleMediaQueryChange: function handleMediaQueryChange(evt) {
        var $target = this[this.mediaQueryMatches() ? 'getBackBtn' : 'getActiveLink']();

        $target.length && $target.trigger('click');
    },
    mediaQueryMatches: function mediaQueryMatches() {
        return this.breakpoint.matches;
    },
    rememberScrollbarPos: function rememberScrollbarPos() {
        this.ypos = this.$window.scrollTop();
    },
    rememberedScrollbarPos: function rememberedScrollbarPos() {
        return this.ypos;
    },
    getActiveItem: function getActiveItem() {
        return this.$items.filter('.' + this.CssClasses.ACTIVE);
    },
    getActiveMail: function getActiveMail() {
        return this.$content.filter('.' + this.CssClasses.ACTIVE);
    },
    getActiveLink: function getActiveLink() {
        var $activeItem = this.getActiveItem();
        return $activeItem.find('[data-toggle="tab"]');
    },
    getBackBtn: function getBackBtn() {
        var $activeMail = this.getActiveMail();
        return $activeMail.find('[data-toggle="tab"]');
    },
    scrollTo: function scrollTo(ypos) {
        this.$window.scrollTop(ypos);
    }
};

Mail.init();
})(jQuery);

Answer 1

在此处使用$(document).on("click")活动

$(document).on("click",".mail-list-link",function() {
// code
});

Answer 2

var createIndexResponse = client.CreateIndex("my-index", c => c
    .Settings(s => s
        .Analysis(a => a
            .Analyzers(o => o
                .Custom("custom", m => m
                    .CharFilters("icu_normalizer")
                    .Filters("lowercase", "asciifolding")
                    .Tokenizer("icu_tokenizer")
                )
            )
        )
    )
    .Mappings(m => m
        .Map<Project>(mm => mm
            // apply to _all field
            .AllField(s => s
                .Analyzer("custom")
            )
            .AutoMap()
        )
    )
);

也许链接跟随href，所以试试这个。