title: Error: 'this' object is incorrect; In JQuery click event - Unexpected Behavior on click
body: <p>I have been trying to add a 'Cancel' button to some existing HTML and jQuery code that has some ajax calls.  I have the 'Cancel' button working, however it stopped some of the behavior of my 'Edit' button.  I cannot seem to figure out why the jQuery click event is not working.  In Firefox I am getting:</p>
  
  <blockquote>
    <p>Ignoring get or set of property that has [LenientThis] because the "this" object is incorrect.</p>
  </blockquote>
  
  <p>EDIT: I am aware the above error is a Firefox Dev specific error that is probably not related to my code.</p>
  
  <p>However I do not see an issue with my use of <code>this</code>, or the function that is supposed to be called when the 'Edit' button is clicked. In fact, I have the same 'Edit' click function working on another module on the same page.</p>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>$('#edit_stuff').click(function(){
          if($(this).html() == 'Edit') {
              $('#stuff .data').each(function () {
                  var contents = $(this).html();
                  var input = document.createElement('input');
                  $(input).addClass('form-control');
                  input.value = contents;
                  // $(input).val(contents);
                  $(this).html('');
                  $(this).append(input);
                  flag = true;
              });
  
              // Show Cancel button and 'Save' button when 'Edit' is clicked
              $('#cancel_stuff').show();
              $(this).html('Save');
          }
          else{
              var list = [];
              $('.info_display div.stuff_holder div.data_container').each(function(){
                  flag = true;
                  console.log(this);
                  var inputs = $(this).children('div').children('input');
                  console.log(inputs);
                  var history = {
                      'title': inputs[0].value,
                      'description': inputs[1].value
                  };
                  list.push(history);
              });
  
              $.ajax({
                  url: '../save_data',
                  data: {honors: JSON.stringify(list)},
                  success: function(data){
                      $('#stuff div.data').each(function () {
                          var contents = $(this).children('input')[0];
                          var val = contents.value;
                          $(this).html(val);
                      });
  
                      // Fill the DIV with ID stuff_holder with the new data and save in stuffData
                      $('#stuff_holder').data('stuffData', $('#stuff_holder').html());
                      // Hide the Cancel button and show 'Edit' when form has been saved
                      $('#cancel_stuff').hide();
                      $('#edit_stuff').html('Edit');
                      // Do not display X after 'Save' has been clicked
                      flag = false;
                  },
                  error: function(){
                      alert("Failed to save your stuff.  Please contact the system administrator.");
                  }
              });
          }
      });
  </code></pre>
  
  <p>Now I have a lot more custom jQuery functions, but this is the one I am having an issue with.  I can post more if this does not help.  My function for the 'Cancel' button is separate, which basically clones the HTML before you click 'Edit', and then replaces the HTML if the user hits cancel.  If you think I need to post that function too, let me know.</p>
  
  <p>The HTML for this:</p>
  
  <pre><code>&lt;div class="panel-heading"&gt;
      {% if request.user == some.user %}
      &lt;span class="edit_info" id="edit_stuff"&gt;Edit&lt;/span&gt;
      &lt;!-- Added Cancel button --&gt;
      &lt;span class="cancel_edit" id="cancel_stuff"&gt;Cancel&lt;/span&gt;
      {% endif %}
      &lt;div class="panel-title"&gt;STUFF&lt;/div&gt;
      &lt;hr class="info-card" /&gt;
  &lt;/div&gt;
  &lt;div class="panel-body" id="stuff"&gt;
      &lt;div class="stuff_holder" id="stuff_holder"&gt;
          {% for stuff in some.stuff.all %}
              &lt;div class="data_container"&gt;
                  {% if request.user == some.user %}&lt;i class="fa fa-remove" style="display: none; color: red; position: relative; top: 0px; float: right; cursor: pointer;" id="stuff_{{ stuff.id }}"&gt;&lt;/i&gt;{% endif %}
                  &lt;div class="stuff-title data"&gt;{{ stuff.stuff }}&lt;/div&gt;
                  &lt;div class="stuff-description data"&gt;{{ stuff.description }}&lt;/div&gt;
                  {% if not forloop.last %}
  
                  {% endif %}
              &lt;/div&gt;
          {%  endfor %}
      &lt;/div&gt;
      {% if request.user == some.user %}
          &lt;button class="btn btn-success" style="float: right;" id="add_stuff"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
      {% endif %}
  &lt;/div&gt;
  </code></pre>
  
  <p>Pretty much a module is shown with a 'Edit' button (the 'Cancel' button is hidden).  When you click 'Edit' it is supposed to inject two input boxes, one for title, one for description, into the module.  The 'Edit' button is replaced by 'Save' and the 'Cancel' button becomes visible.  Everything is working except for the injection of the two input boxes when you click 'Edit'.  That should be happening in the first part of the .click event function.  I have tried to change <code>this</code> to <code>#edit_stuff</code>, with no difference.  </p>
  
  <p>I am fairly new to using JavaScript debuggers, such as that in Firefox, so I am not really getting anywhere.  So if anybody's suggestion includes how I could debug this on my own, that would be great. As you can see, this is part of a python web project, and jQuery is not my strong language. Thanks in advance!</p>
  
  <p>EDIT: I have a feeling that some of my other jQuery functions are messing with this .click function() I have for the #edit_stuff ID.  I don't want to post all my code right now, so if I figure it out before anyone can hopefully guide me to what I am missing, then I will post it here. </p>