DOMNodeInserted event loop
-
12-12-2019 - |
Question
I am developing a chrome extension (my fourth question or so...) for facebook, which adds a custom button beside the "like" button. Since posts are added automatically to the news feed without a page refresh, I have to add the script every time new posts are added.
And I use DOMNodeInserted
event.
The problem is that when the event is called I insert a new element (the button) to the page and it makes a loop!
My script:
$(document).bind('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();
});
You can see my previous question here
I'm tired of asking questions so I'll really appreciate any answer/comment!
Solution
Does this work? Providing that you don't insert any more .like_link
elements, this should be a no-op when your element insertion happens, since it only looks for node insertions which contain a .like_link
.
$(document).bind('DOMNodeInserted', function(event) {
$(event.target).find(".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>'
);
$(event.target).find(".taheles_saving_message").hide();
});