javascript - 调用 "DOMNodeInserted"事件时添加一个元素

Question

我想在每个“喜欢”按钮(chrome 扩展)之后添加一个元素。由于帖子是在不刷新页面的情况下添加到新闻提要中的，因此我必须添加一个事件监听器“DOMNodeInserted”。但是当我尝试将 after() 函数放入其中时，它不起作用。

代码:

    $("#contentArea").addEventListener("DOMNodeInserted", function(event) {
        $(".like_link").after('<span class="dot"> · </span><button class="taheles_link stat_elem as_link" title="תגיד תכל&acute;ס" type="submit" name="taheles" onclick="apply_taheles()" data-ft="{&quot;tn&quot;:&quot;&gt;&quot;,&quot;type&quot;:22}"><span class="taheles_default_message">תכל&acute;ס</span><span class="taheles_saving_message">לא תכלס</span></button>');
        $(".taheles_saving_message").hide(); 
    });

当我将 $("#contentArea") 更改为 document 时，整个页面都崩溃了。

Answer 1

如果你想在 jQuery 中添加一个事件监听器，那不是方法，正确的方法应该总是:

$(document or window).bind( your_event_name, function(event) { your_callback });

考虑到这一点，你可以这样写:

$(document).bind('DOMNodeInserted', function(event) {

    alert('inserted ' + event.target.nodeName + // new node
          ' in ' + event.relatedNode.nodeName); // parent

});

或者每次在 DOM 中插入节点时执行您需要执行的操作。

---

请注意，如果您想使用 addEventListener，您需要使用纯 javascript 而不是 jQuery。

document.addEventListener("DOMNodeInserted", function () {
    // your code
}, false);

编辑:与 jQuery 1.7 一样，请改用 '.on' 函数:http://api.jquery.com/on/

---

您的方法出现的另一个错误(如果有效)是您将在插入节点 并调用DOMNodeInserted 时破坏您的应用程序(因为您已插入一个节点)，这将再次插入该节点，并再次调用 DOMNodeInserted...

你可以看到发生了什么......

我建议您听取正确的方法并在此处附加您的 span...