Question

我刚接触过Ajax电话，现在我面临的情况确实令人困惑。

我有一个脚本，我从Tympanus Codrops获得，这是我网站的主要结构。在此脚本上，对于每次页面更改，它都会调用一个新的JSON文件。所以我有一个四页的网站，这意味着对于每个新的部分，内容都是从JSON文件中调用的。

以下是此脚本中的App.js文件：

/*    
      jQuery Setup                                                           
************************************************************************/ 
jQuery.ajaxSetup({
  cache: false
})

/*    
      ArticleAnimator Object                                                           
************************************************************************/ 
var ArticleAnimator = ArticleAnimator || {
  canScroll:          true,
  initialLoad:        false,
  animationDuration:  500,
  postCount:          4,
  currentPostIndex:   1,
  postCache:          {},
  pageTemplate:       null,
};

ArticleAnimator.load = function(){
  this.currentPostIndex = getURLIndex();
  this.makeSelections();

  $body.append( this.$current )
  $body.append( this.$next )

  var self = this;
  this.createPost({ type: 'current' }, function(){
    self.createPost({ type: 'next' }, function(){

      /* Selections. */
      self.refreshCurrentAndNextSelection();

      /* Push initial on to stack */
      history.pushState(pageState(), "", "#" + self.currentPostIndex)

      /* Bind to some events. */
      self.bindGotoNextClick();
      self.bindPopstate();
      self.bindWindowScroll();
    })
  })
}

ArticleAnimator.makeSelections = function(){
  this.$page         = $('.page');
  this.pageTemplate  = elementToTemplate( this.$page.clone() );
  this.$current      = this.currentElementClone();
  this.$next         = this.nextElementClone();
}

ArticleAnimator.getPost = function(index, callback){
  callback = callback || $.noop;

  if ( this.postCache[index] ){
    callback( this.postCache[index] );
    return;
  }

  var self = this;
  $.getJSON('data/post'+ index +'.json', function(d){
    self.postCache[index] = d;
    callback(d)
  });
} 

ArticleAnimator.nextPostIndex = function(index){
  return (index === this.postCount) ? 1 : index + 1 
}

ArticleAnimator.createPost = function(opts, callback){
  opts      = opts || {};
  var self  = this;
  var type  = opts['type'] || 'next';

  if ( opts['fromTemplate'] ){
    $body.append( this.nextElementClone() );
    this['$' + type] = $('.' + type)
  }

  var index = (type == 'next') ? this.nextPostIndex( this.currentPostIndex) : this.currentPostIndex;
  this.getPost(index, function(d){
    self.contentizeElement(self['$' + type], d);
    callback && callback();
  });

}

ArticleAnimator.contentizeElement = function($el, d){
  $el.find('.big-image').css({ backgroundImage: "url(" + d.image + ")" });
  $el.find('h1.title').html(d.title);
  $el.find('h2.description').html(d.title_secondary);
  $el.find('.content .text').html(d.content);
  $el.find('.content .text2').html(d.contentb);
  $el.find('.content .text').css({ width: d.contentcss1 });
  $el.find('.content .text2').css({ display: d.contentcss3 });
  $el.find('h3.byline time').html(d.date);
  $el.find('h3.byline .author').html(d.author);
}

ArticleAnimator.animatePage = function(callback){
  var self              = this;
  var translationValue  = this.$next.get(0).getBoundingClientRect().top;
  this.canScroll        = false;

  this.$current.addClass('fade-up-out');

  this.$next.removeClass('content-hidden next')
       .addClass('easing-upward')
       .css({ "transform": "translate3d(0, -"+ translationValue +"px, 0)" });

  setTimeout(function(){
      scrollTop();
      self.$next.removeClass('easing-upward')
      self.$current.remove();

      self.$next.css({ "transform": "" });
      self.$current = self.$next.addClass('current');

      self.canScroll = true;
      self.currentPostIndex = self.nextPostIndex( self.currentPostIndex );

      callback();
  }, self.animationDuration );
}

ArticleAnimator.bindGotoNextClick = function(){
  var self  = this;
  var e     = 'ontouchstart' in window ? 'touchstart' : 'click';

  this.$next.find('.big-image').on(e, function(e){
    e.preventDefault();
    $(this).unbind(e);

    self.animatePage(function(){
      self.createPost({ fromTemplate: true, type: 'next' });
      self.bindGotoNextClick();
      history.pushState( pageState(), '', "#" + self.currentPostIndex);
    });
  });
}

ArticleAnimator.bindPopstate = function(){
  var self = this;
  $window.on('popstate', function(e){
    if( !history.state || self.initialLoad ){
      self.initialLoad = false;
      return;
    }
    self.currentPostIndex = history.state.index;
    self.$current.replaceWith( history.state.current );
    self.$next.replaceWith( history.state.next );

    self.refreshCurrentAndNextSelection();
    self.createPost({ type: 'next' });
    self.bindGotoNextClick();

  });
}

ArticleAnimator.bindWindowScroll = function(){
  var self = this;
  $window.on('mousewheel', function(ev){
    if ( !self.canScroll ) 
      ev.preventDefault()
  })
}

ArticleAnimator.refreshCurrentAndNextSelection = function(){
  this.$current      = $('.page.current');
  this.$next         = $('.page.next');
}

ArticleAnimator.nextElementClone = function(){
  return this.$page.clone().removeClass('hidden').addClass('next content-hidden');
}

ArticleAnimator.currentElementClone = function(){
  return this.$page.clone().removeClass('hidden').addClass('current');
}

/*    
      Helper Functions.                                                      
************************************************************************/ 
function elementToTemplate($element){
  return $element.get(0).outerHTML;
}

function scrollTop(){
  $body.add($html).scrollTop(0);
}

function pageState(){
  return { index: ArticleAnimator.currentPostIndex, current: elementToTemplate(ArticleAnimator.$current), next: elementToTemplate(ArticleAnimator.$next) }
}

function getURLIndex(){
  return parseInt( (history.state && history.state.index) ||window.location.hash.replace('#', "") || ArticleAnimator.currentPostIndex );
}


/*    
      Document ready.                                                         
************************************************************************/ 
$(document).ready(function(){

  /* A couple of selections. */
  $body         = $(document.body);
  $window       = $(window);
  $html         = $(document.documentElement);

  /* Let's get it started. */
  ArticleAnimator.load();

})

在主页面（index.html）中，我有一个document.ready函数，它将click函数委托给我从上面脚本调用的一个JSON文件中的特定对象。此单击函数使用Ajax请求发送电子邮件，如下所示：

$(document).ready(function() {

   $(".content").delegate("#enviadepo","click",function() {
     var form = $('.depoform');
     $.ajax({
        async: false,
        url: "maildepo.php?ajax=true",
        cache: false,
        type: "post",
        data: form.serialize(),
        success: function(response){
           response = $.trim( response );
           if ( response == "success" ) {
            $('.depoform #nome').val("");
            $('.depoform #msg').val("");
           }
        }
      });
      return false;
   });

});

在document.ready上实现此功能后，发送电子邮件的Ajax请求仅在我用CTRL + SHIFT + R刷新页面并且已经调用了JSON文件且包含点击功能中提到的对象时才有效。

因此，如果我在第一个或第二个JSON文件中，并尝试到达第三个JSON（包含点击功能中提到的对象），它根本不起作用。

当我在正确的JSON文件上刷新页面，成功传递消息，转到下一个JSON文件，返回到上一个文件并尝试再次点击＆＃34;发送消息＆＃34;按钮。

我真的对此部分感到困惑。我不知道是否必须将从JSON文件调用的对象注册为Global对象（在某种程度上我可以这样做吗？）或者如果这个问题必须在上面提到的主脚本上解决为主要结构JS

我试图将click函数放在主脚本的回调中，但没有任何反应。我唯一确定的是，如果我刷新包含委托指向的对象的JSON文件中的页面，则click函数会起作用。

一些启示？

提前致谢！

Answer 1

问题本身的评论已回答了这个问题。答案是通过以下方式找到的：

将.delegate更改为.on并引用this SO answer
在JSON回调之前放置/运行新的.on函数

在JSON回调问题之后调用click函数

1 个答案: