Django的管理員formset：如何使用jQuery添加一個新的formset行？

Question

在Django管理添加頁面，使用TabularInline當它有一個錨Add another Poll它的HTML看起來像

<a href="javascript:void(0)">Add another Poll</a> 

現在我想添加一個新行，就像使用鼠標點擊的錨，在文件輸入變化事件被觸發：

$('input:file').change(function(e){ 
    //... do something ... 
    var rows = "#poll_set-group .tabular.inline-related tbody tr"; 
    var addbtn = $(rows).parent().find("tr:last a") 
    addbtn.click(); // try to add a new row but doesn't work 
}); 

元素選擇正確，但click（）不起作用。我也試過addbtn.trigger('click')，雖然它幾乎做同樣的事情，仍然無法正常工作。

當我跟蹤到了Django的inline.js可以看到綁定的功能

inline.js

(function($) { 
    $.fn.formset = function(opts) { 
     ///... 
     if ($(this).length && showAddButton) { 
      var addButton; 
      if ($(this).attr("tagName") == "TR") { 
       //... 
       addButton = $(this).parent().find("tr:last a"); 
      } else { 
       //... 
       addButton = $(this).filter(":last").next().find("a"); 
      } 
      addButton.click(function() { 
      //... 
      }); 
     } 
    } 
})(django.jQuery); 

誰能告訴我爲什麼.click()不起作用？ 或其他建議做同樣的事情？

Answer 1

經過幾個小時的嘗試，我發現如何做到這一點，並在過程中學習了一些關鍵點。

1.使用.data將本地對象存儲在插件中。 （不知道會與否造成內存泄漏或其他問題）

inline.js

(function($) { 
    $.fn.formset = function(opts) { 
     ///... 
     if ($(this).length && showAddButton) { 
      var addButton; 
      if ($(this).attr("tagName") == "TR") { 
       //... 
       addButton = $(this).parent().find("tr:last a"); 
      } else { 
       //... 
       addButton = $(this).filter(":last").next().find("a"); 
      } 

      // store local object 'addButton' into data() 
      var $this = $(this), data = $this.data('addButton') 
      if(!data){ 
       $this.data('addButton', { 
        target : addButton, 
       }); 
      } 

      addButton.click(function() { 
      //... 
      }); 
     } 
    } 
})(django.jQuery); 

2.jQuery對象實例在其自己的命名空間（django.jQuery在這個例子中）存在

<script type="text/javascript"> 
$(document).ready(function(){ 
    (function($) { 
     var rows1 = "#poll_set-group .tabular.inline-related tbody tr"; 
     $(rows1).formest({...}); 
    })(django.jQuery); 

    var rows2 = "#poll_set-group .tabular.inline-related tbody tr"; 
    $(rows2).data('addButton') 
    // Error, rows2's data is empty 
    // cause of although rows1 & rows2 have same selector, but they are different objects in the different namespaces 

    // use django.jQuery(rows2) to get the same object instance of rows1 
    // this can trigger the same event handler being bound in the plugin inline.js 
    django.jQuery(rows2).data('addButton').target.click(); 
}); 
</script> 

Answer 2

addbtn和addButton是不同的對象，因此有不同的點擊事件處理程序。您將不得不擴展addButton以添加其他事件處理程序。此外，綁定於DOM準備，如事件：

$('input:file).change(); 

僅適用於那些當DOM被加載元素，並且將不被施加到選擇器的未來元素。要做到這一點，你需要使用.live()