mootools - l'utilisation de addEvent to element ne fonctionne pas correctement ?

Question

Je me tape la tête contre ça et ça commence à faire mal.

J'ai des difficultés à ajouter un événement à un élément. Je peux ajouter l'événement, puis l'appeler immédiatement avec element.fireEvent('click'), mais une fois que l'élément est attaché au DOM, il ne réagit pas au clic.

exemple de code :

var el = new Element('strong').setStyle('cursor','pointer');
el.addEvent('click',function () { alert('hi!'); });
el.replaces(old_element); // you can assume old_element exists
el.fireEvent('click'); // alert fires

Cependant, une fois que j'ai attaché ceci au DOM, l'élément ne réagit pas au clic. les styles collent (le curseur est pointé lorsque je le survole), mais aucun événement ne se déclenche. j'ai également essayé le survol de la souris, sans résultat.

Est-ce que j'ai raté quelque chose de fondamental ? Je fais cela partout, mais dans ce cas précis, cela ne fonctionne pas.

EDIT----------------

ok voici un peu plus de code. malheureusement je ne peux pas exposer le vrai code, car il s'agit d'un projet qui est encore sous le sceau du secret.

En fait, les nœuds sont tous considérés comme "remplaçables", puis le json trouvé dans l'attribut rel="" détermine ce par quoi ils doivent être remplacés. Dans ce cas particulier, l'élément remplacé est un nom d'utilisateur qui doit afficher des informations lorsqu'on clique dessus.

de nouveau, si je déclenche l'événement directement après l'avoir attaché, tout va bien, mais l'élément ne réagit pas au clic une fois qu'il est attaché.

HTML-----------

<p>Example: <span class='_mootpl_' rel="{'text':'foo','tag':'strong','event':'click','action':'MyAction','params':{'var1': 'val1','var2': 'val2'}}"></span></p>

JAVASCRIPT----- hypothèses : 1. les deux fonctions ci-dessous font partie d'une classe plus large 2. ROOTELEMENT est défini lors de la fonction initialize() 3. MonAction est définie avant toute analyse (et est correctement gérée lors du test .fireEvent())

parseTemplate: function() {
    this.ROOTELEMENT.getElements('span._mootpl_').each(function(el) {
        var _c = JSON.decode(el.get('rel'));
        var new_el = this.get_replace_element(_c); // sets up the base element
        if (_c.hasOwnProperty('event')) {
            new_el = this.attach_event(new_el, _c);
        }
    });
},

attach_event: function(el, _c) {
    el.store(_c.event+'-action',_c.action);
    el.store('params',_c.params);
    el.addEvent(_c.event, function() {
        eval(this.retrieve('click-action') + '(this);');
    }).setStyle('cursor','pointer');
    return el;
},

Answer 1

Fonctionne très bien. Cas de test : http://jsfiddle.net/2GX66/

Answer 2

Le débogage n'est pas facile lorsqu'il n'y a pas de contenu / DOM.

premièrement - utilisez-vous la délégation d'événements ou avez-vous des gestionnaires d'événements sur un parent / l'élément parent qui font event.stop() ?

Dans l'affirmative, remplacer par event.preventDefault()

Deuxièmement, il ne faut pas remplacer un élément mais le placer à un autre endroit du DOM, par exemple document.body et voir si cela fonctionne.

s'il fonctionne ailleurs, voir le point 1

Bien que je réalise que vous avez dit "code d'exemple", vous devriez écrire ceci comme :

new Element('strong', {
    styles: {
        cursor: "pointer"
    },
    events: {
        click: function(event) {
            console.log("hi");
        }
    }
}).replaces(old_element);

il est inutile de faire 3 déclarations séparées et d'enregistrer une référence si vous n'allez pas la réutiliser. vous devriez vraiment montrer le code ACTUEL si vous avez besoin de conseils. dans cet extrait, vous ne définissez même pas le texte du contenu, de sorte que l'élément ne s'affichera pas s'il est inline Il pourrait s'agir d'un problème de style, quel est l'affichage de l'élément, inline ? inline-block ?

Pouvez-vous lui assigner une classe qui le modifie lors d'un pseudo :hover et le voir agir ? Vous dites que le curseur reste collé, ce qui signifie que vous pouvez le survoler à l'aide de la souris - c'est pourquoi les css fonctionnent. cela élimine également la possibilité d'avoir des shims d'éléments. above il / els transparents qui peuvent empêcher l'événement de bouillonner.

enfin, lui assigner un id dans le making. assigner l'événement à un élément parent via :

parentEl.addEvent("click:relay(strong#idhere)", fn);

et voir si cela fonctionne ainsi (vous avez besoin de Element.delegate de mootools-more)

bonne chance, il faut aimer les problèmes bizarres - cela rend notre travail intéressant. ce ne serait pas la pire chose que de poster une url ou JSFIDDLE aussi...