Question

我在这里创造了一个小提琴...... https://jsfiddle.net/qukhn4uk/

正如你所看到的，我有一个对象，用于点击一个网格图像，打开一个弹出窗口并通过ajax加载该人的数据（你不会看到小提琴中的数据加载，但你明白了）。这里的一切都很好。处理此问题的对象是：

Stories = {
    flyout: '#flyout',
    closeFlyout: '#flyout .close-flyout',
    storyTrigger: '.story .story-trigger',
    ajaxContentContainer: '#flyout .content',
    loader: '<i class="fa fa-spin fa-spinner"></i>',
    body: 'body',
    init: function() {
        $(this.storyTrigger).click(this.showStory.bind(this));
        $.ajaxSetup({cache:false});
        $(document).on("click", this.closeFlyout, this.closeStory.bind(this));
    },
    showStory: function(e) {
        e.preventDefault();
        var target = $(e.target),
            targetName = target.data("name");
        $(this.flyout).css("transform", "translateX(-100%)");
        $(this.body).css("overflow", "hidden");
        $(this.ajaxContentContainer).append(this.loader);
        $(this.ajaxContentContainer).load("/story/" + targetName);
    },
    closeStory: function() {
        $(this.flyout).css("transform", "translateX(100%)");
        $(this.ajaxContentContainer).empty();
        $(this.body).css("overflow", "auto");
    }
}

然后我有另一个加载函数来打开弹出窗口并根据url中的哈希加载数据。这是处理...的对象。

DirectStory = {
        storyDiv: '.story',
        init: function() {
            var self = this;
            if ( window.location.hash != '' ) {
                $(this.loadStory.bind(this));
            }
            $.ajaxSetup({cache:false});
        },
        loadStory: function() {
            var hash = window.location.hash,
                story = hash.substring(1);
            targetStory = $(this.storyDiv).find("[data-name='" + story + "']");
            targetStory.click();
        }
    }

一切都很好，但有一个小故障。由于某种原因，DirectStory对象导致Stories对象的ajaxLoader加载两次。有人可以帮我弄清楚为什么会这样吗？谢谢！

更新：我已经发现targetStory.click（）在DirectStory对象中运行了两次。我试图先解开它，但这没有用。为什么会跑两次？

Answer 1

我已经为在这里降落的人解决了这个问题......

targetStory变量以我存储它的方式找到了两个触发器。

我只是将targetStory变量更新为...

targetStory = $（＆＃34; .full-link [data-name =＆＃39;＆＃34; + story +＆＃34;＆＃39;]＆＃34;）;

Ajax Loader在功能上显示两次

1 个答案: