Question

I’m using object literals on my project. I’m targeting selecting with jquery. It works fine the first time but when the part I’m targeting is reloaded with AJAX I can’t target those element anymore. But I look into firebug they’re there…
I’m even doing console.log() to test if my code works and it works but it just doesn’t want to pick those. So in order for it to work, I have to refresh the entire browser.
Do you know what’s the deal with AJAX dom reload and selectors.

I think it’s something to do with the DOM reloading and redrawing itself or something along those lines…

Here is my code:

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

If you are replacing an element on the page, you are destroying the original reference to the element. You need to redo the reference to point to the new element.

Create a new method in your code that (re)initializes the references you need. Instead of adding them in the odject, set them in the method.

Basic idea:

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();
     ...
     ...

And when your Ajax call comes back you just need to call initReferences again.