Question

bangin'我的头撞了这个，它开始受伤了。

我在向元素添加事件时遇到问题。我能够添加事件，然后使用element.fireEvent（'click'）立即调用它，但是一旦元素附加到DOM，它就不会对点击作出反应。

示例代码：

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

但是，一旦我将其附加到DOM，元素就不会对点击产生反应。样式棒（鼠标悬停时光标是指针），但没有事件触发。尝试鼠标悬停也无济于事。

这里有任何线索吗？我错过了什么基本的东西？我在这个地方做这个，但在这一个例子中它不起作用。

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

好的，这里还有一些代码。不幸的是，我无法揭露真实的代码，因为它仍然是一个仍然紧密包装的项目。

基本上，所有节点都被选为“可替换”，然后在rel =“”属性中找到的json为应该替换的内容设置了阶段。在此特定实例中，替换元素是一个用户名，在单击时应弹出一些信息。

再次，如果我在附加事件后直接触发事件，一切都很好，但元素一旦附着就不会对点击做出反应。

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

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

JAVASCRIPT ----- 假设： 1.以下两个函数是较大类的一部分 2. ROOTELEMENT设置为initialize（） 3.在进行任何解析之前定义MyAction（并在.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

工作得很好。测试用例：http://jsfiddle.net/2GX66/

Answer 2

当你缺少内容/ DOM时，调试这并不容易。

首先 - 您是否使用事件委托或在父{/ {1}}的父元素上使用事件处理程序？

如果是，请替换为event.stop()

要做的第二件事。不要替换元素，而是将其放在DOM中的其他位置 - 比如event.preventDefault()的第一个节点，看它是否在那里工作。

如果在其他地方有用，请参阅＃1

虽然我说你说'示例代码'，但你应该写成：

document.body

如果您不打算重复使用，则无需执行3个单独的语句并保存引用。但是，如果你需要建议，你真的应该展示ACTUAL代码。在此代码段中，您甚至没有设置内容文本，因此如果new Element('strong', { styles: { cursor: "pointer" }, events: { click: function(event) { console.log("hi"); } } }).replaces(old_element);，该元素将不会显示。它可能是一个样式问题，元素上的显示内联是什么？ inline-block的？

你可以为它分配一个类来改变它：a hover伪并看到它做到了吗？请注意，你说光标棒，这意味着你可以鼠标悬停它 - 因此css工作。这也消除了任何元素填充inline它/透明els可以防止事件冒泡的可能性。

最后。在制作中为它指定一个id。通过以下方式将事件分配给父元素：

above

并查看它是否以这种方式工作（您需要来自mootools的parentEl.addEvent("click:relay(strong#idhere)", fn); - 更多）

祝你好运，一定要喜欢奇怪的问题 - 让我们的工作值得做。发布网址或JSFIDDLE也不是最糟糕的事情......

mootools - 使用addEvent元素不能正常工作？

2 个答案: