阿贾克斯装载机显示功能两次

我已经在这里创造一个小提琴... 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对象正在导致Story对象的ajaxLoader加载两次。有人能帮我弄清楚为什么会发生这种情况吗？谢谢！

更新：我发现targetStory.click（）在DirectStory对象内运行两次。我试图先解除它，但这并没有帮助。它为什么运行两次？

来源

2017-04-17 JordanBarber

我已经解决了这个的人谁在这里的土地......

的targetStory变量是找到两个触发器与我存储的方式。

我只是更新了targetStory变量...

targetStory = $（”全链路[数据名='” +故事+ “']”）;

来源

2017-04-17 18:03:33 JordanBarber

阿贾克斯装载机显示功能两次

回答

相关问题