jquery .load() not working onclick

问题

I'm trying to have a site set up so when the page loads there is a div that dynamically pulls it's content from a .html page I have set up. I have a bunch of thumbnails at the top and when you click one I want the content from a different .html document to replace what every was in that div that was dynamically loaded into the first time.

To do this I'm trying to use the jquery .load() feature. What I tried to do was set up a function:

<script type="text/javascript"> 
$(document).ready(function space_load() {

$('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
}
</script>

and then tried to launch it using:

onclick="space_load();"

this didn't work and I was wondering if anyone could help me with this. The other thing I was wondering is if this were to work, would it replace the content that was previously loaded into there? I might be getting a head of myself and it just does this on it's own.

回答1:

First, your code has invalid structure

$(document).ready(function() {    
    function space_load() {
        $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
    }    
    space_load(); //Now call the function
});

However, you can trim it down do this

$(function() {
    $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
});

But, since you want this on click of an element. This is what you need:

$(function() {
    $("#yourlinkid").click(function() {
        $('#SPACE_TOTAL')
           .html('<img src="preloader.gif" />')
           .load('http://www.klossal.com/portfolio/space.html');
    });
});

回答2:

Do you need to document.ready here? I think you could simply invoke the function when the click happens.

<script type="text/javascript"> 
 function space_load() {
  $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
 }
</script>

and then...

onclick="space_load();"

Making the assumption that #SPACE_TOTAL is not a container that is dynamically populated at runtime, at which point you would need to wrap a document.ready.

回答3:

At first you don't need the $(document).ready() and second is you forgot to close the ready() method. ); is missing at the end of your JS.

来源：https://stackoverflow.com/questions/9872087/jquery-load-not-working-onclick

标签

jquery

load