0

django管理者追加ページでは、使用時にhtmlのようなTabularInlineアンカーがありますAdd another Poll

<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()なぜうまくいかないのか誰か教えてもらえますか？または、同じことを行うための他の提案はありますか?

4

2 に答える 2

2

数時間試してみて、その方法を見つけ、プロセス中にいくつかの重要なポイントを学びました.

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>
于 2013-03-02T06:18:44.990 に答える
0

addbtnとaddButtonは異なるオブジェクトであるため、異なるクリック イベント ハンドラーを持ちます。addButtonイベント ハンドラーを追加するには、拡張する必要があります。また、次のような DOM Ready にバインドされているイベント:

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

DOM がロードされたときに存在する要素にのみ適用され、そのセレクターの将来の要素には適用されません。そのためには、 .live()を使用する必要があります

于 2013-02-21T12:43:35.697 に答える