显示双按钮和三按钮 (DOMNodeInserted)答案

【问题标题】：Double and triple button is shown (DOMNodeInserted)显示双按钮和三按钮 (DOMNodeInserted)
【发布时间】：2012-05-27 08:22:54
【问题描述】：

我有一个奇怪的问题：

我正在开发一个 chrome 扩展程序，它在 facebook 中的“like”按钮旁边添加一个自定义按钮。到目前为止，在很多帮助下，我找到了一种运行脚本的方法，即使将帖子添加到新闻提要（无需刷新页面）也是如此。但问题在于，在时间线/自动收报机（右侧的实时提要窗口）中，按钮会随着时间的推移而自我复制。

我当前的脚本：

$(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 是新闻提要/任何其他地方的帖子/cmets 中显示的按钮。 cmnt_like_link 是 cmets 中显示的按钮。

如果我在选择器中使用#contentArea，自定义按钮甚至不会添加到代码中。如果我使用document（当前），它会显示在股票行情中，但会自我复制。我想知道问题是什么。我试图查看 chrome 开发人员面板，但没有运气。

【问题讨论】：

对我来说看起来像一个循环？每次插入元素时DOMNodeInserted 触发，并插入一个元素，触发.... 等待它.....DOMNodeInserted，插入元素，触发....
搞笑，这是我上一个问题，你可以查看here
而且答案似乎是正确的，它应该只在找到某些其他元素等情况下插入元素，但由于按钮不断重复，它以某种方式循环。设置jsfiddle，以便人们更轻松地对其进行测试，并且您更有可能得到正确答案。
我发现如果我在选择器中添加$(event.target).find(".tickerDialogContent .taheles_link, .tickerDialogContent .dot").css("display","none");，它就可以工作。
没错，并编辑上一个答案 - 添加fbTimelineUnit，如下所示：$(event.target).find(".tickerDialogContent .taheles_link, .tickerDialogContent .dot, .fbTimelineUnit .taheles_link, .fbTimelineUnit .dot").css("display","none");

标签： javascript jquery dom google-chrome-extension

【解决方案1】：

好的，我自己找到了答案：

只需在事件处理程序中添加$(event.target).find(".tickerDialogContent .taheles_link, .tickerDialogContent .dot, .fbTimelineUnit .taheles_link, .fbTimelineUnit .dot, .fbPhotoSnowliftPopup .taheles_link, .fbPhotoSnowliftPopup .dot").remove();，如下所示：

$(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();
});

});

如果有人需要，我已添加它以供将来参考。

干杯:)

【讨论】：