Double and triple button is shown (DOMNodeInserted)

Question

I have a weird problem:

I am developing a chrome extension that adds a custom button beside the "like" button in facebook. Until now, with alot of help I found a way to run the script even when posts are added to the news feed (without a page refresh). But the problem is that in the timline/ ticker (live feed window in the right) the button duplicates itself over time.

My current script:

$(document).ready(function(){
    $(".like_link,.cmnt_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();

    $(document).bind('DOMNodeInserted', function(event) {
        $(event.target).find(".like_link,.cmnt_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>'
        );
        $(event.target).find(".taheles_saving_message").hide();
    });
});

like_link is the button that is shown in posts/comments in the news feed/any other place. cmnt_like_link is the button that is shown in comments.

If I use #contentArea in the selectors, the custom button is not even added to the ticker. If I use document (current) it is shown in the ticker but duplicates itself. I am wondering what the problem is. I tried to look at the chrome developer panel but with no luck.

Looks like a loop to me? Everytime an element is inserted `DOMNodeInserted` fires, and inserts an element, which fires.... wait for it ..... `DOMNodeInserted`, which inserts elements, which fires .... — adeneo, May 20 '12 at 16:10
Funny, that was the previous question I asked, you can view it [here](http://stackoverflow.com/questions/10674079/domnodeinserted-event-loop) — Nadav S., May 20 '12 at 16:12
And the answer seems correct, it should only insert the elements if certain other elements are found etc. but since the buttons keep duplicating, it's somehow looping. Set up a [jsfiddle](http://jsfiddle.net) so it's easier for people to test it, and you're more likely to get a correct answer. — adeneo, May 20 '12 at 16:18
I found that if I add `$(event.target).find(".tickerDialogContent .taheles_link, .tickerDialogContent .dot").css("display","none");` inside the selector, it works. — Nadav S., May 20 '12 at 16:45
Exactly, and edit for the previous answer - add for `fbTimelineUnit`, like this: `$(event.target).find(".tickerDialogContent .taheles_link, .tickerDialogContent .dot, .fbTimelineUnit .taheles_link, .fbTimelineUnit .dot").css("display","none");` — Nadav S., May 20 '12 at 17:22
(a) Do you mean "inside the event handler"?, (b) if I understand correctly, it seems that by hiding elements rather than suppressing duplicate insertions, you have just made the problem invisible without actually fixing it; the DOM will grow and grow, and client memory will leak, maybe fatally. — Beetroot-Beetroot, May 20 '12 at 17:32
(a) yes. (b) you are right. I need to find another solution. Maybe you want I'll send you the current extension's .crx file? — Nadav S., May 20 '12 at 18:31
Koder, I don't run GooCh so the .crx wouldn't be much good to me and I also know v little about Facebook - I have been there maybe three times ever. However, if you can replicate the issue in a [jsfiddle](http://jsfiddle.net/) as adeneo suggests .... . Yes, this will be tricky as it involves Facebook but the only other way ahead it to wait for a Facebook/GooCh expert to find your question. — Beetroot-Beetroot, May 20 '12 at 20:10
I will try to check it again in jsfiddle. But I know no-one has to be familiar with Facebook/ GooCh. I am looking for someone who knows jQ & can check facebook's html. And how does jsfiddle can change something?! — Nadav S., May 21 '12 at 12:50
Ok I found what to do. Instead of using `css()` I use `remove()` and that makes sure the page will not crash. Hooray! — Nadav S., May 21 '12 at 13:45

score 0 · Accepted Answer · answered May 21 '12 at 13:47

Ok I found the answer myself:

Just add $(event.target).find(".tickerDialogContent .taheles_link, .tickerDialogContent .dot, .fbTimelineUnit .taheles_link, .fbTimelineUnit .dot, .fbPhotoSnowliftPopup .taheles_link, .fbPhotoSnowliftPopup .dot").remove(); inside the event handler, like this:

$(document).ready(function(){
$(".like_link,.cmnt_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();

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

    $(event.target).find(".tickerDialogContent .taheles_link, .tickerDialogContent .dot, .fbTimelineUnit .taheles_link, .fbTimelineUnit .dot, .fbPhotoSnowliftPopup .taheles_link, .fbPhotoSnowliftPopup .dot").remove();

    $(event.target).find(".like_link,.cmnt_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>'
    );
    $(event.target).find(".taheles_saving_message").hide();
});

});

I've added it for future reference, if someone will need it.

Cheers :)

Double and triple button is shown (DOMNodeInserted)

1 Answers1