使用 Mootools 添加事件处理程序.addEvent() 在某个地方神秘地失败

Question

我正在为一个网络应用程序开发一些 JS，但遇到了一个相当令人难以置信的问题。不幸的是，我无法发布完整的代码，因为它是尚未发布的项目的一部分。这个问题让我和我问过的一些同事都感到困惑——据我所知，它应该有效。

现在，解决实际问题：用户在某些表单字段中输入一些信息并单击“确认”图像，然后 AJAX 请求被发送回服务器。服务器进行一些处理，然后发回带有状态和一些附加数据的响应。用户正在使用的模式对话窗口中会显示一条状态消息，并会显示一个带有链接的图标。下面是 Mootools Request.JSON 对象的“onComplete”处理程序，删除了一些错误条件处理：

  onComplete: function(response) {
    if (response) {
      if (response.status == 0) {
        // this means the request was successful
        licenses = response.licenses;
        updateControls();
        licenseList();
        // here I add the status message...
        $("createform_result").innerHTML = "<img src=\'/media/com_supportarea/images/db_success.png\' /> License created. Download:<br /><br />";
        // ...and the download "link"
        if (response.tlsid) {
          $("createform_result").innerHTML += "<a href=\"#\" id=\"newtlslic-"+response.tlsid+"\"><img src=\'/media/com_supportarea/images/download_small.png\' /></a> <em>TLS</em>";
          // this line is here for debugging only, to make sure this
          // block of code is run (it is) and the element is found (it is)
          $("newtlslic-"+response.tlsid).style.border = "1px solid red";
          $("newtlslic-"+response.tlsid).addEvent("click", function(e) {
            // I've stripped out all other code, also for debugging
            e.stop();
          });
        }
      }
    }
  }

出现带有链接的消息和图标，应用样式（出现红色边框），并且在 Firefox 或 Chrome 中不会出现错误消息。但是，单击该图标会导致 URL 附加一个 #（e.stop()) 不执行任何操作）。根据EventBug插件，链接没有附加点击事件。看起来 .addEvent() 在这里什么也没做。

现在，这是他们最关心的问题：这是为什么？我该如何解决它？帮助！

Answer 1

JavaScript 中的字符串是不可变的。当您执行以下操作时：

$("createform_result").innerHTML += "<a href=\"#\" id=\"newtlslic-"+response.tlsid+"\"><img src=\'/media/com_supportarea/images/download_small.png\' /></a> <em>TLS</em>";

您将innerHTML 作为字符串引用。它的作用是，它将属性提取到一个字符串中，将其与您传递的其他字符串连接起来，然后最后返回一个新字符串，该字符串被设置为innerHTML。

这样做时，您每次迭代都会覆盖元素的内容。

附加到元素的事件不是由通用 ID 处理程序完成的 - 它们依赖于 DOM 中的元素，然后读取元素 UID（mootools 分配给所有传递元素的内部属性）并将事件回调添加到元素中该 UID 后面的存储。

你可以通过执行 console.log(element.retrieve("events")); 来查看这项工作，

如果你重写了innerHTML，内部元素将被重新创建并获得一个新的UID，这意味着回调现在指向一个空指针，因为 UID 是元素存储中的键。

我对你在这里所做的事情可能是错误的，因为我实际上没有看到你再次重写它的地方，但你剥离的代码中可能有一个，特别是如果你正在运行一个循环。

处理这个问题的最好方法是使用其他方法 - 使用事件委托。

它可以允许您通过某些选择器将单击事件添加到父元素。这适用于在任何时间以任何方式添加的任何匹配元素。

例如。

// add this once, outside the loop 
$("createform_result").addEvent("click:relay(a.editLink)", function(event, element) {
    console.log(this === element); 
    console.log(this === event.target);
    console.log(this.get("data-id"));
}); 

// then as you loop the results, just inject the els or use innerHTML or whatever...
new Element("a.editLink", {
    html: '<img src=\'/media/com_supportarea/images/download_small.png\' /></a> <em>TLS</em>',
    "data-id": response.tlsid
}).inject($("createform_result"));

事件委托现在是 1.4.0 中 mootools 核心的一部分，或者是之前版本中 mootools-more 的一部分。

玩得开心！