javascript - 为什么我的元素在通过 AJAX 重新加载时没有被定位

Question

我在我的项目中使用了对象字面量。我的目标是使用 jquery 进行选择。它第一次运行良好，但当我使用 AJAX 重新加载我定位的部分时，我无法再定位这些元素。但我调查了他们在那里的 Firebug ......我什至在做 console.log() 来测试我的代码是否有效并且它有效但它只是不想选择那些。所以为了让它工作，我必须刷新整个浏览器。你知道 AJAX dom 重新加载和选择器是怎么回事吗？

我认为这与 DOM 重新加载和重绘本身或类似的东西有关...

这是我的代码:

Module.editWishlistTitle = {
  wishListContent: $('.mod-wish-list-content'),
  title: $('.title').find('h2'),
  titleTextField: $('#wishlist-title-field'),
  titleInnerContainer: $('.title-inner'),
  editTitleForm: $('.edit-title-form'),
  submitCancelContainer: $('.submit-cancel'),
  notIE9: $.browser.msie && $.browser.version < 9,

 edit: function () {
  var fieldTxt = this.titleTextField.val(),
      editForm = this.editTitleForm,
      titleParent = this.titleInnerContainer,
      fieldCurrentTitle = this.title.text();

  this.titleTextField.val(fieldCurrentTitle);

  this.submitCancelContainer.removeClass('hidden');

  if (!this.notIE9) {
    editForm.css('opacity', 0).animate({ opacity: 1 }).removeClass('hidden');
    titleParent.addClass('hidden').animate({ opacity: 0 });
    console.log(editForm);
  } else {
    editForm.removeClass('hidden');
    titleParent.addClass('hidden');
  }

 }

 init: function () {
  var self = this;

  console.log(this.editTitleForm);

  //edit
  this.wishListContent.delegate('.edit-title a', 'click', function (e) {
    self.edit();
    e.preventDefault();
  });
};

Answer 1

如果您要替换页面上的一个元素，您将破坏对该元素的原始引用。您需要重做引用以指向新元素。

在您的代码中创建一个新方法来(重新)初始化您需要的引用。不要将它们添加到对象中，而是在方法中设置它们。

基本思路:

Module.editWishlistTitle = {
  wishListContent: $('.mod-wish-list-content'),
  title: $('.title').find('h2'),
  //titleTextField: $('#wishlist-title-field'),
  ...
  ...
  initReferences : function(){
      this.titleTextField = $('#wishlist-title-field');
  },
  ...
  ...

  init: function () {
     this.initReferences();
     ...
     ...

当您的 Ajax 调用返回时，您只需再次调用 initReferences。