javascript - 在鼠标悬停时加载内容

Question

我想在鼠标悬停在 div 内的图标上时加载 div 的内容。此外，鼠标悬停应该只触发一次，并且图标最好在加载内容后消失。

将加载到 de div 中的内容将是一个带有社交媒体按钮的外部文件。如果您想知道；我不希望他们加载页面的其余部分，因为它们会减慢速度。此外，一些访问者可能不喜欢 FB 和 G+ 等网站跟踪他们的互联网事件。

所以，我收集了一些代码并复制粘贴了一些，这就是我想出的:

<div id="social_media">

<img src="icon.png" onmouseover="javascript:$('#social_media').load('external_file.php'); this.onmouseover=null;" alt="Show Social Media Buttons!" />

</div> 

问题是，它工作得很好 :) 但由于它是我从 3 个不同来源获得并粘贴在一起的代码，我的问题是它是否有用？例如，我从来没有试图找到一种方法来删除鼠标悬停时的图标，它确实做到了:)

我几乎没有编写 Javscript/jQuery 的经验，所以请告诉我您的想法，以便我从中学习!

来自阿姆斯特丹的感谢和问候!

Answer 1

避免内联代码尝试

<div id="social_media">

<img src="icon.png"  alt="Show Social Media Buttons!" />

</div>

将 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');
        }
    });
});

P.S 选择器没有优化，这段代码的结果也只是给你一个想法

DEMO