Load Content On Mouseover

I want to load the content of a div on the mouseover of an icon within the div. Furthermore, the mouseover should only fire once and preferably the icon should disappear after load

Solution 1:

avoid the inline code try

<div id="social_media">

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

</div>

attach a mouseenter event handler to the 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 the selectors are not optimized nor the outcome of this code it was just to give you an idea

DEMO

Solution 2:

The answer to your real question is "the code is kinda middling." The reason the icon went away is because when you called load you replaced it. Internally your document is a tree of piece of the document called the DOM, for "document object model" -- abusing terminology, since that tree is actually an expression of the model, not the model itself.

There's a node in that tree that is your div, and it contains a node with the icon img. When you do the load(), that node is replaced with what you loaded.

As @john says, it's undesirable to put code like that inline, because when you want to figure out what it's doing later, it can be hard to find.

Solution 3:

Several things to note:

• You really should avoid inline JavaScript code in HTML, that's not clean at all. Move it to an external JavaScript file of possible, or, at least, in a separate <script> tag. It will be ways easier to maintain.

• Using this method to fire the event only once seems odd. You should use the jQuery one method, which is made exactly for that.

• The icon just disappears because the load method replaces the content of the div in which the icon is.

For example, IMO, the code should be:

 $('#social_media').one('mouseover', function(){
   $(this).load('external_file.php');
 });