Monday, May 21, 2012

Double and tripple button is shown (DOMNodeInserted)

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.





No comments:

Post a Comment