Question

我的剧本中显然存在一个根本性的缺陷，虽然我看不出它是什么。

我正在尝试从“选择器”更改列表中的元素。

脚本在执行一次时运行正常，但每次执行时都会增加每次事件运行的次数。

更容易理解我在实践中的意思：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>

Answer 1

您首先遍历所有.edit元素并将事件附加到每个元素。

在每个元素的事件处理程序中，遍历每个#picker span元素并为每个元素附加另一个事件处理程序。

这样，每次触发.edit元素的事件处理程序时，都会为#picker span元素附加其他事件处理程序，并且它们会堆叠起来。当#picker span上的事件被触发时，一切都会崩溃......

Answer 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/

Answer 3

因为您是按$$('.edit')进行选择而且此选择器将返回您正在进行的集合（您有3 的class="edit"元素）{{1并为每个元素.each(function(el) ...分配（点击事件）。在每次el.addEvent('click',function() ...事件被触发时，在此事件处理程序中，您将为.edit分配新的事件处理程序。结果，多个事件被触发，“某处”失败。

注意：正如 @Tadeck 所述，通过#picker span（以一对一方式）顺序分配事件是不是很有效。它可以通过选择器完成。

为什么我在一个事件上获得多次执行？

3 个答案: