在鼠标hover时加载内容
我想在div中的图标的鼠标hover上加载div的内容。 此外，鼠标hover应该只触发一次，并且优选地，在加载内容之后图标应该消失。
将在de div中加载的内容将是具有社交媒体按钮的外部文件。 如果你想知道; 我不希望它们与页面的其余部分一起加载，因为它们会降低速度。 此外，一些访问者可能不喜欢FB和G +等网站跟踪他们的互联网运动。
所以，我收集了一些代码并粘贴了一点，这就是我想出来的：
问题是，它工作得非常好:)但是因为它是我从3个不同来源获得并粘贴在一起的代码，我的问题是它是否有任何好处？ 例如，我从未试图找到一种方法来删除鼠标hover上的图标，它只是:)
我几乎没有编写Javscript / jQuery的经验，所以请让我知道你对它的看法，以便我可以从中学习！
感谢阿姆斯特丹的问候！
避免内联代码尝试
将mouseenter事件处理程序附加到img
$(function(){// short cut of $(document).ready(); read more on google $("#social_media>img").bind({ mouseenter:function(e){ $('#social_media').load('external_file.php'); } }); });
PS选择器没有优化，也没有这个代码的结果只是为了给你一个想法
DEMO
你真正问题的答案是“代码有点中等。” 图标消失的原因是因为当你调用load你更换了它。 在内部，您的文档是一个名为DOM的文档片段，用于“文档对象模型” – 滥用术语，因为该树实际上是模型的表达，而不是模型本身。
该树中有一个节点是你的div ，它包含一个带有图标img的节点。 执行load() ，该节点将替换为您加载的节点。
正如@john所说，将内联代码放入内联是不可取的，因为当你想要弄清楚它以后做什么时，很难找到它。
有几点需要注意：
-
你真的应该避免HTML中的内联JavaScript代码，这根本就不干净。 将其移动到可能的外部JavaScript文件，或者至少在单独的
标记中。 这将是更容易维护的方式。 -
使用此方法仅触发一次事件似乎很奇怪。 你应该使用jQuery
one方法，这是完全为此。 -
图标只是消失，因为
load方法替换了图标所在的div的内容。
例如，IMO，代码应该是：
$('#social_media').one('mouseover', function(){ $(this).load('external_file.php'); });