5

mootools で「クリック」イベントを使用して、事前構成された HTML 要素を動的に追加したいと考えています。

ですから、あまり気の利いたものではありませんが、基本的な知識で機能させることができます。ここまでコーディングした...

これは、いくつかのテキスト、クラス名、およびいくつかのイベントを含む事前構成済みの要素です。これは、コンテナーに挿入されたときに、イベントを既に追加しておきたいためです。

        var label = new Element('label', {
            'text': 'Label',
            'class': 'label',
            'events': {
                'click': function(el){
                    alert('click');
                }
            }
        });

ラベル要素を追加する私の関数は次のとおりです。

        function addText(){
            $('fb-buildit').addEvent('click', function(){                   
           row.adopt(label, textinput, deletebtn);
            $('the-form').adopt(row.clone());
            row.empty();

    /*
    label.clone().inject($('the-form'));
    textinput.inject($('the-form'));
    deletebtn.inject($('the-form'));
    */

            });
        }

inject を使用する 2 番目の部分も機能しますが、"alert('click')" を発生させるクリック イベントも機能します。DOM に挿入された場合、adopt を使用したメソッドは、ラベル オブジェクトにイベントを追加しません。

誰でもこれで私を助けることができますか？adobt が「イベント」設定を無視し、inject を無視しない理由を知りたいだけです。

前もって感謝します。

(私の英語でごめんなさい^^)

4

1 に答える 1

5

あなたは行き​​ますlabel.clone().injectがrow.adopt(label)、そうではありませんrow.adopt(label.clone())-

どちらにしても。.clone() はcloneEventsを実行しません - 手動で行う必要があります。

var myclone = label.clone();
myclone.cloneEvents(label);
row.adopt(label);

これがどのように機能するかです

その理由については、イベントは要素ストレージに格納されます - これは要素ごとに一意です。mootools は各要素に uid を割り当てます。例えば、label = 1、label.clone() -> 2、label.clone() -> 3 などです。

これは次のようにStorage[1] = { events: ... }なります。要素を複製すると新しい element.uid が作成されるため、暗黙的に使用しない限りイベントは機能しません.cloneEvents()

.clone()ORIGINAL 要素とそのストレージおよびイベントを使用するため、どちらが機能するかを実行していない場合があります。

提案は、イベント委任を検討することを検討してください。あなたができる

formElement.addEvent("click:relay(label.myLabel)", function(e, el) {
    alert("hi from "+ el.uid);
});

これは、追加する新しい要素の数に関係なく、それらが のタイプlabelとクラスmyLabelであり、子であるformElement限り、イベントが親にバブルするため、クリックは常に機能することを意味します。

于 2011-03-03T16:02:34.983 に答える