jquery .load () не работает по клику

Question

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

Для этого я пытаюсь использовать функцию 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();"

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

Answer 1

Во-первых, ваш код имеет недопустимую структуру

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

Answer 2

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

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

Answer 3

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