Question

我在我的项目中使用对象文字。我的目标是用jquery进行选择。它第一次运行正常，但是当我使用AJAX重新加载我所针对的部分时，我无法再将这些元素作为目标。但我看着他们在那里的萤火虫...... 我甚至在做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

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

在代码中创建一个新方法，用于（重新）初始化所需的引用。而不是在odject中添加它们，在方法中设置它们。

基本理念：

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。

Answer 2

在DOM准备就绪后，如果您注入任何数据/类/ ID将无法在DOM中使用，那么您最好使用实时或委托来获取新数据。

http://api.jquery.com/delegate/

最好使用委托，这样可以在dom准备好后加载新数据，这样就可以避免刷新/重新加载页面。

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

2 个答案: