0

There is obviously a fundamental flaw in my script, although I can't see what it is.

I am trying to change an element in a list from a 'picker'.

The script runs fine when executed once but with every new execution it increments the times it runs on every event.

Easier to understand what I mean in practice here: 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>

3 Answers 3

2

Because you add new event listeners on #picked span on every click on .edit. You should add them indepentently.

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');
    });
});

​ Here's updated sample http://jsfiddle.net/hQqh6/

1
  • 1
    We already have found the issue, but you have at least took the effort to prepare working example :) Anyway, instead of global (or not) variable I would rather use .store() and .retrieve() element methods for storing and retrieving data. This way you could even avoid using activeEl.getParent().getElement('p') every time the picker event handler is being triggered, or even improve/shorten the code more.
    – Tadeck
    Aug 16, 2012 at 7:29
2

You first iterate through all .edit elements and attach event to each of them.

In the event handler for each of them, you iterate through every #picker span element and attach another event handler for each of them.

This way every time the event handler for .edit element is fired, you attach additional event handlers for #picker span elements and they get stacked up. When the event on #picker span gets triggered, all hell breaks loose...

0

Because you are selecting by $$('.edit') and this selector will return collection (you have 3 elements with class="edit") through which you are doing .each(function(el) ... and assigning for each element el.addEvent('click',function() ... (click event). In this event handler every time .edit event is fired you are assigning new event handlers for #picker span. As the result multiple events are fired and "somewhere" it fails.

NOTE: As @Tadeck mentioned, assigning event sequentially through .each() (in one-by-one manner) is not very effective. It can be done through the selector.

5
  • Actually, he is attaching the events one-by-one. Not very efficient, but this does not create the issue here.
    – Tadeck
    Aug 16, 2012 at 7:00
  • @Tadeck, yes, didn't got the point. I've corrected my answer. Thanks for mentioning that. Aug 16, 2012 at 7:03
  • 1
    One more thing. I believe you have made a mistake and wrote the code for jQuery. This is a Mootools question. Mootools' $() function is an alias for document.id, which is different from $$() function (which is more similar to jQuery's $() function). Furthermore, Mootools' elements do not have .click() method (jsfiddle.net/JBwEd).
    – Tadeck
    Aug 16, 2012 at 7:20
  • @Tadeck, completely mistaken. Sorry. Still sleeping, I'll remove code snippet for not being completely wrong with this answer. Will be more attentive next time. Aug 16, 2012 at 7:26
  • @PaulTRawkeen: No problem. Drink some coffee ;)
    – Tadeck
    Aug 16, 2012 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.