DOMNodeInserted Event Loop

Question

DOMNodeInserted Event Loop

I am developing a chrome extension (my fourth question or so ...) for facebook, which adds a custom button next to the "like" button. Since posts are automatically added to the feed without refreshing the page, I have to add a script every time new posts are added.

And I use the event DOMNodeInserted.

The problem is that when the event is called, I insert a new element (button) on the page and create 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="תגיד תכל&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();
});

You can see my previous question here

I'm tired of asking questions, so I would really appreciate any answer / comment!

+1

javascript jquery dom google-chrome-extension mutation-events

Nadav S. May 20 '12 at 14:04

source share

1 answer

Eric · Accepted Answer · 2012-05-20T14:33:45+0000

? .like_link, no-op, , node, .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="תגיד תכל&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();
});

DOMNodeInserted Event Loop

More articles: