2012-03-26 2 views
-1

Я пытаюсь создать сайт, поэтому, когда страница загружается, есть div, который динамически вытаскивает его содержимое с .html-страницы, которую я создал. У меня есть куча эскизов наверху, и когда вы нажимаете один, я хочу, чтобы содержимое из другого .html-документа заменяло все, что было в этом div, который был динамически загружен в первый раз.jquery .load() не работает onclick

Для этого я пытаюсь использовать функцию jquery .load(). То, что я пытался сделать, было создать функцию:

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

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

, а затем попытался запустить его с помощью:

onclick="space_load();" 

это не сработало, и мне было интересно, если кто-то может мне помочь с этим. Другая вещь, о которой мне было интересно, - это если это сработает, заменит ли она ранее загруженный контент? Я мог бы возглавить себя, и он просто делает это самостоятельно.

ответ

5

Во-первых, ваш код недействительных структурировать

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

Однако, вы можете обрезать его вниз сделать это

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

Но, так как вы хотите это при щелчке элемента. Это то, что вам нужно:

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

было упомянуто раньше, и я не думал об этом, но есть ли способ дать ему нагрузку .gif, которая уходит, когда закончится загрузка? – loriensleafs

+0

@loriensleafs, проверьте обновление в моем последнем блоке кода. – Starx

+0

, и он просто уходит, когда он заканчивает загрузку? – loriensleafs

4

Нужно ли документировать. Уже здесь? Я думаю, вы могли бы просто вызвать функцию, когда происходит клик.

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

, а затем ...

onclick="space_load();" 

Заставить предположение, что #SPACE_TOTAL не является контейнером, который динамически заполняется во время выполнения, в какой момент вы должны обернуть document.ready.

+0

ли при отображении DOM гарантированно полностью готова связь? – AndreKR

+0

Да, я согласен, но продолжая то, что было опубликовано, не предусмотрено, что это так. – SpaceBison

+0

Я думал, используя это, что #SPACE_TOTAL был div, на который загружался url? На самом деле я не думал о загрузке. – loriensleafs

2

Сначала вам не нужен $(document).ready(), а во-вторых, вы забыли закрыть метод ready(). ); отсутствует в конце вашего JS.