0

私のスクリプトには明らかに根本的な欠陥がありますが、それが何であるかはわかりません。

リスト内の要素を「ピッカー」から変更しようとしています。

スクリプトは 1 回実行すると正常に実行されますが、新しい実行ごとに、すべてのイベントで実行される回数が増えます。

ここで実際に私が意味することを理解しやすくします: http://jsfiddle.net/Zbdt3/1/

$$('.edit').each(function(el) {
    el.addEvent('click',function() {
        $$('#picker span').each(function(im) {
            im.addEvent('dblclick',function() {
                el.getParent().getElement('p').set('text',im.get('text'));
                console.log(im.get('text'));
            });
        });
    });
});

<ul>
<li><p>X</p><span class="edit">edit</span></li>
<li><p>Y</p><span class="edit">edit</span></li>
<li><p>Z</p><span class="edit">edit</span></li>
</ul>

<div id="picker">
<span>A</span>
<span>B</span>
<span>C</span>
</div>
4

3 に答える 3

2

最初にすべての要素を繰り返し処理し、.edit各要素にイベントをアタッチします。

それぞれのイベント ハンドラーで、すべての要素を繰り返し#picker span処理し、それぞれに別のイベント ハンドラーをアタッチします。

このように、要素のイベント ハンドラーが発生するたびに、.edit要素の追加のイベント ハンドラーをアタッチする#picker spanと、それらが積み重なっていきます。上のイベント#picker spanがトリガーされると、すべての地獄が解き放たれます...

于 2012-08-16T06:58:05.353 に答える
2

#picked spanをクリックするたびに新しいイベントリスナーを追加するためです.edit。個別に追加する必要があります。

var activeEl;

$$('.edit').each(function(el) {
    el.addEvent('click',function() {
        $('picker').setStyles({
            'display':'block'
        });
        activeEl = el;             
    });
});

$$('#picker span').each(function(im) {
    im.addEvent('dblclick',function() {        
        activeEl.getParent().getElement('p').set('text',im.get('text'));          
        console.log(im.get('text'));
        $('picker').setStyle('display','none');
    });
});

更新されたサンプルはこちらhttp://jsfiddle.net/hQqh6/

于 2012-08-16T07:09:27.823 に答える
0

あなたが選択しているので$$('.edit')、このセレクターはコレクションを返します（の3要素がclass="edit"あります）。これにより、各要素（クリックイベント.each(function(el) ...）に割り当てます。このイベント ハンドラーでは、イベントが発生するたびに、新しいイベント ハンドラーを に割り当てます。その結果、複数のイベントが発生し、「どこか」で失敗します。el.addEvent('click',function() ....edit#picker span

注： @Tadeckが述べたように、イベントを順番に.each()（1つずつ）割り当てることはあまり効果的ではありません。セレクターから実行できます。

于 2012-08-16T06:56:39.907 に答える