錯誤：'this'對象不正確;在JQuery單擊事件 - 意外行爲點擊

Question

我一直在嘗試添加一個'取消'按鈕到一些現有的HTML和jQuery代碼有一些AJAX調用。我有'取消'按鈕的工作，但它停止了我的'編輯'按鈕的一些行爲。我似乎無法弄清楚爲什麼jQuery點擊事件不起作用。在Firefox中我得到：

Ignoring get or set of property that has [LenientThis] because the "this" object is incorrect.

編輯：我知道上面的錯誤是可能不相關的我的代碼的Firefox開發特定的錯誤。

但是我沒有看到我使用this的問題，或者當點擊'編輯'按鈕時應該調用的函數。實際上，我在同一頁面上的另一個模塊上具有相同的「編輯」單擊功能。

這裏是我的jQuery：

$('#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."); 
       } 
      }); 
     } 
    }); 

現在我有更多的自定義jQuery函數，但是這是我有一個問題之一。如果這沒有幫助，我可以發佈更多信息。我的「取消」按鈕功能是單獨的，它基本上克隆HTML，然後單擊「編輯」，然後在用戶點擊取消時替換HTML。如果您認爲我也需要發佈該功能，請告訴我。

這種情況的HTML：

<div class="panel-heading"> 
    {% if request.user == some.user %} 
    <span class="edit_info" id="edit_stuff">Edit</span> 
    <!-- Added Cancel button --> 
    <span class="cancel_edit" id="cancel_stuff">Cancel</span> 
    {% endif %} 
    <div class="panel-title">STUFF</div> 
    <hr class="info-card" /> 
</div> 
<div class="panel-body" id="stuff"> 
    <div class="stuff_holder" id="stuff_holder"> 
     {% for stuff in some.stuff.all %} 
      <div class="data_container"> 
       {% if request.user == some.user %}<i class="fa fa-remove" style="display: none; color: red; position: relative; top: 0px; float: right; cursor: pointer;" id="stuff_{{ stuff.id }}"></i>{% endif %} 
       <div class="stuff-title data">{{ stuff.stuff }}</div> 
       <div class="stuff-description data">{{ stuff.description }}</div> 
       {% if not forloop.last %} 

       {% endif %} 
      </div> 
     {% endfor %} 
    </div> 
    {% if request.user == some.user %} 
     <button class="btn btn-success" style="float: right;" id="add_stuff"><i class="fa fa-plus"></i></button> 
    {% endif %} 
</div> 

差不多一個模塊被示出爲具有「編輯」按鈕（「取消」按鈕被隱藏）。當你點擊'編輯'時，它應該在模塊中注入兩個輸入框，一個用於標題，一個用於描述。 「編輯」按鈕被替換爲「保存」，並且「取消」按鈕變爲可見。當你點擊'編輯'時，除了注入兩個輸入框外，一切正常。這應該發生在.click事件函數的第一部分。我試圖將this更改爲#edit_stuff，沒有任何區別。

我對使用JavaScript調試器比較新，比如Firefox中的調試器，所以我沒有真正獲得任何地方。所以如果有人的建議包括我可以自己調試這個，那會很棒。正如你所看到的，這是一個python web項目的一部分，jQuery不是我強大的語言。提前致謝！

編輯：我有一種感覺，我的一些其他jQuery函數正在搞亂這個.click函數（）我有#edit_stuff ID。我現在不想發佈我的所有代碼，所以如果我在任何人都能夠指導我找到我想要的東西之前弄明白，那麼我會在這裏發佈它。

Answer 1

好的，這可能真的很愚蠢，但我解決了我自己的問題，這不是我認爲的那樣。我在我的Python模板HTML文件中嵌入了JavaScript，並且我一直在使用PyCharm。由於這是我第一次在PyCharm中實現jQuery，所以我沒有意識到PyCharm使用自動引號來評論Django的代碼，而不是在模板文件中除外，特別是在腳本標記中。所以，因爲我信任PyCharm的評論熱鍵導致我的模板文件中有{# #}引用標籤，這使我的jQuery代碼無法運行。實際上，當您突出顯示並點擊CTRL+/時，PyCharm應該能夠識別它是jQuery代碼並使用適當的註釋塊（用於JavaScript的//或/* */）。

再次。我的錯在那裏。這是我完成的代碼，以防萬一有人想知道：

$('#edit_stuff').click(function(){ 
     // Check to see if the user has any stuff already added 
     if ($(this).html() == 'Edit') { 
      // Check for flag to activate .mouseenter and .mouseleave events 
      $('.data_container').mouseenter(function() { 
       if(flag) 
        $(this).children('i').css('display', 'block'); 
      }); 
      $('.data_container').mouseleave(function() { 
       if(flag) 
        $(this).children('i').css('display', 'none'); 
      }); 
      $('.fa-remove').click(function() { 
       $(this).parent().remove(); 
      }); 
      // Set flag to allow stuff removal 
      flag = true; 
      // If the user does not have any stuff added, launch #add_stuff .click function 
      if($('#stuff_holder').find('div.data_container').length == 0) { 
       $(this).html('Save'); 
       // Show Cancel button and 'Save' button when 'Edit' is clicked 
       $('#cancel_stuff').show(); 
       $('#add_stuff').click(); 
      } else { 
       $('#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); 
       }); 
       $(this).html('Save'); 
       // Show Cancel button and 'Save' button when 'Edit' is clicked 
       $('#cancel_stuff').show(); 
      } 
     } else { 
      var stuff_list = []; 
      $('.user_info_display div.stuff_holder div.data_container').each(function(){ 
       console.log(this); 
       var inputs = $(this).children('div').children('input'); 
       console.log(inputs); 
       var history = { 
        'title': inputs[0].value, 
        'description': inputs[1].value 
       }; 
       stuff_list.push(history); 
      }); 

      $.ajax({ 
       url: '../save_user_data', 
       data: {stuff: JSON.stringify(stuff_list)}, 
       success: function(data){ 
        $('#stuff div.data').each(function() { 
         var contents = $(this).children('input')[0]; 
         var val = contents.value; 
         $(this).html(val); 
        }); 

        // Set flag 
        flag = false; 
        $('#edit_stuff').html('Edit'); 
        // Hide the Cancel button and show 'Edit' when form has been saved 
        $('#cancel_stuff').hide(); 
        // Fill the DIV with ID stuff_holder with the new data and save in stuffData 
        $('#stuff_holder').data('stuffData', $('#stuff_holder').html()); 
       }, 
       error: function(){ 
        alert("Failed to save your stuff. Please contact the system administrator."); 
       } 
      });