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 loading the content.

The content that will be loaded in de div will be an external file with social media buttons. In case you are wondering; I don't want them to load with the rest of the page because they slow it down. Also, some visitors might not be comfortable with sites like FB and G+ tracking their internet movement.

So, I have gathered some code and copy pasted a bit and this is what I came up with:

<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>

The thing is, it works perfectly fine :) But since it is code that I got from 3 different sources and pasted together, my question is if it's any good? For example, I never tried to find a way to remove the icon on mouseover, it just did :)

I have almost no experience in coding Javscript/jQuery, so please let me know what you think about it so that I can learn from it!

Thanks and greetings from Amsterdam!

回答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

回答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.

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

来源：https://stackoverflow.com/questions/10777103/load-content-on-mouseover

标签

javascript

jquery

onmouseover