由于动态加载，JQuery 将 div 添加到 Facebook 帖子失败？答案

【问题标题】：JQuery add div to Facebook posts fails because of dynamic loading?由于动态加载，JQuery 将 div 添加到 Facebook 帖子失败？
【发布时间】：2013-11-12 04:39:32
【问题描述】：

我正在使用鼠标悬停功能向 Facebook 群组添加额外内容。我测试了 DIV 类，看看我是否已经添加了内容。

它适用于前 10 个左右带有 storyInnerWrapper 类的 DIV，但随后停止添加文本。我认为这是因为内容是动态的，就像下面的 Arun P Johny 所说的那样。

这是一个 JSfiddle 工作示例；
http://jsfiddle.net/hellonearthis/WHb2P/ 带有修复程序，该示例可以正常工作。

下面是完整的油脂猴子脚本。

// ==UserScript==
// @name       FaceBook
// @version    0.1
// @description  Adds link 
// @match      https://www.facebook.com/*
// @match      https://www.facebook.com/
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js
// ==/UserScript==

$( "div.storyInnerWrapper" ).mouseover(function() {
  var $this = $(this);
    if (!$this.data('extra')) { 
        $this.data('extra', true);
        $this.append('<div>Added a div</div>');
    }
});

【问题讨论】：

你能为此提供一个小提琴或一些示例标记吗？另外，您是否将 id “额外”添加到多个元素？如果是这样，您希望避免这种情况，因为每页的 ID 对于一个元素应该是唯一的。尚未回答您的问题，但仍然是一个观察结果。
storyInnerWrapper元素是否动态添加
这段代码太复杂了。尝试简化。例如，连续三次只保存一个索引“取消索引”是令人困惑的。也不清楚 if 语句在寻找什么。我认为你最好重新检查这个问题。 mouseover 事件的职责是对解决方案做出清晰的理解。您还可以考虑使用基于内容的唯一 ID，以便检查是否更容易添加 div。
另外一个元素的 id 必须是唯一的，所以你不能将 id extra 分配给超过 1 个元素
当前代码的简化版可以是$("div.storyInnerWrapper").mouseover(function () { var $this = $(this); if (!$this.hasClass('extra')) { $this.addClass('extra'); // tag add $this.append("<div>Added a div</div>"); } });

标签： javascript jquery facebook greasemonkey mouseover

【解决方案1】：

您不应该使用“id”属性来“标记”一个元素。 “id”值必须是唯一的。相反，您可以使用.data() 来标记元素，如下所示：

$('div.storyInnerWrapper').mouseover(function() {
    var $this = $(this);
    if (!$this.data('extra')) { 
        $this.data('extra', true);
        $this.append('<div>Added a div</div>');
    }
});

【讨论】：

谢谢，虽然我使用 ID 做错了，而使用 var 的风格更加优雅。

【解决方案2】：

为了解决我遇到的动态内容问题，我使用了waitForKeyElements
被Brock Adams 无数次提及也非常感谢Arun P Johny 为我指明了正确的方向，感谢John S 帮助我改进了基本代码。

最终的 Greasemonkey 脚本如下所示：

// ==UserScript==
// @name       FaceBook_add_stuff
// @description  Adds a div to wall posts when mouse is over them.
// @match      https://www.facebook.com/*
// @match      https://www.facebook.com/
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

function addExtraSeedLinks (jNode) {
    $( "div.storyInnerWrapper" ).mouseover(function() {
        var $this = $(this);
        if (!$this.data('extra')) { 
            $this.data('extra', true);
            $this.append('<div>Added a div</div>');
        }
    });
}

waitForKeyElements (".storyInnerWrapper", addExtraSeedLinks);

【讨论】：

【解决方案3】：

你应该这样做：

$( "div.storyInnerWrapper" ).mouseover(function() {
    //var index = $( "div.storyInnerWrapper" ).index();

    if ($("div.extra.storyInnerWrapper").index()== 0){  // if no tag

        $("div.storyInnerWrapper" ).append( "<div class='extra'>Added a div</div>" );
  }
});

请注意，我已将 #extra 替换为 .extra，因为 id 应该是唯一的。

【讨论】：