I want to add an element after every "like" button (chrome extension). Since posts are added to the news feed without refreshing the page, I have to add an event listener "DOMNodeInserted
". But when I try to put the after()
function inside it, it doesn't work.
Code:
$("#contentArea").addEventListener("DOMNodeInserted", function(event) {
$(".like_link").after('<span class="dot"> · </span><button class="taheles_link stat_elem as_link" title="תגיד תכל´ס" type="submit" name="taheles" onclick="apply_taheles()" data-ft="{"tn":">","type":22}"><span class="taheles_default_message">תכל´ס</span><span class="taheles_saving_message">לא תכלס</span></button>');
$(".taheles_saving_message").hide();
});
When I change $("#contentArea")
to document
it crashes all the page.
if you want to add an event listener in jQuery, that is not the method, the corect way should always be:
$(document or window).bind( your_event_name, function(event) { your_callback });
with this in mind, you can write:
$(document).bind('DOMNodeInserted', function(event) {
alert('inserted ' + event.target.nodeName + // new node
' in ' + event.relatedNode.nodeName); // parent
});
or do what you need to perform every time a node is inserted in the DOM.
for your information, if you want to use addEventListener
you need to use plain javascript and not jQuery.
document.addEventListener("DOMNodeInserted", function () {
// your code
}, false);
Edit: As on jQuery 1.7, please use the '.on' function instead: http://api.jquery.com/on/
another error that comes up of your method (if it worked) is that you will break your application as you are inserting a node and call the DOMNodeInserted
(cause you have inserted a node) and that will insert the node again, and call the DOMNodeInserted
again...
you can see what is going on ...
I would suggest that you listen to the correct method and append your span
there...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With