Django 管理表单集：如何使用 jQuery 添加新的表单集行？

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在插件中存储本地对象。 （不确定是否会导致内存泄漏或任何其他问题）

内联.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()