JQuery .load 函数仅适用于 Chrome答案

【问题标题】：JQuery .load function only working in ChromeJQuery .load 函数仅适用于 Chrome
【发布时间】：2016-02-17 13:40:19
【问题描述】：

页面加载后，我想使用 JQuery 从 div 元素中获取数据属性，其中包含颜色值。然后我想将颜色值应用到 SVG 图像s。这在 Chrome 中运行良好，但在 IE/Firefox 中运行良好：

$("div.socialmediaicons svg").load(function(event) { 

  var socialcoloractive = $(this).closest("div").data("socialcoloractive");
  var socialcolorinactive = $(this).closest("div").data("socialcolorinactive");

  TweenMax.to(".iconactive svg", 1.5, {
      fill: socialcoloractive,
  });
  TweenMax.to(".iconinactive svg", 1.5, {
      fill: socialcolorinactive,
  });

});

我找到的最接近解决方案的是这篇文章：Jquery applying css to load div 但是我不知道如何使用回调来修改我的代码。

感谢您的帮助。

【问题讨论】：

我的印象是load 将 URL 作为其第一个参数。
这可能是我的第一个错误。我需要获取 this div 的颜色值，所以我选择了 .load () 因为像 .on ("click" , function(event)... 这样的操作不适用，因为我是不使用任何动作来触发事件，除了页面加载。
要了解 SVG 的加载时间，请参阅 stackoverflow.com/questions/337293/…
所以这些是内联的<svg> 元素？将您的代码更改为$("div.socialmediaicons svg").each(function(){...})，您会没事的。
@Andy 在这个上下文中（作为第一个参数传递的函数）jQuery 附加了一个load 事件处理程序：api.jquery.com/load-event

标签： javascript jquery ajax svg

【解决方案1】：

由于您有内联 SVG 元素，我认为您不必等待它们加载，但 Chrome 可能会在它们上触发 load 事件。无论如何，您只想遍历这些元素并更改颜色：

$("div.socialmediaicons svg").each(function() { 

  var socialcoloractive = $(this).closest("div").data("socialcoloractive");
  var socialcolorinactive = $(this).closest("div").data("socialcolorinactive");

  TweenMax.to(".iconactive svg", 1.5, {
      fill: socialcoloractive,
  });
  TweenMax.to(".iconinactive svg", 1.5, {
      fill: socialcolorinactive,
  });

});

简化演示：https://jsfiddle.net/zs0meqsh/

【讨论】：