ajax调用后，$（''）选择器无法正常工作

Question

为什么我的函数中的img : $('img')等变量在ajax调用后会丢失它们的值。这是一个示例函数。

imageFades: {
   img : $('img'),

   init: function() {
      this.img.fadeIn(200)
      console.log('fire')
   }
}

在ajax调用之后，console.log会触发，但fadeIn不会触发。我已经测试过直接将$('img').fadeIn(200)添加到init函数中，并且工作正常。究竟发生了什么？

Answer 1

如果您在ajax调用（听起来像）或在imageFades对象创建后的任何时间替换了您的图像，那么您必须重新运行选择器，以便它可以看到新添加的图像。

imageFades: {
   init: function() {
      $('img').fadeIn(200);
      console.log('fire')
   }
}

jQuery对象不是“实时”。他们无法跟上DOM的变化。它们表示创建jQuery对象时DOM中的内容以及运行选择器查询的时间点的快照。

Answer 2

如果没有看到您的整个代码，很难肯定地说，但很可能您对this的使用感到困惑。在jQuery AJAX响应函数中，this未设置为创建的对象。引用jQuery API：

  

所有回调中的this引用是在设置中传递给$.ajax的上下文选项中的对象;