jquery и php: как загрузить определенный элемент div только по клику

Question

Я знаю, как переключать определенный элемент div при нажатии, но что если я не хочу, чтобы определенный элемент загружался еще?Не просто спрятать на странице, но и не загружать ее, пока она не нажата?

Я знаю, что

$(document).ready(function(){
   $('#item').click(function(){
          $('#item2').toggle();
   });
});

загрузит все, и # item2 будет скрыт только до щелчка, но я не хочу, чтобы элемент скрывался, я не хочу его загружатьпока не нажал.Я делаю это, потому что, если у меня много больших файлов, это замедлит страницу.в любом случае, чтобы сделать это: нажмите #item, затем загрузите # item2?

Answer 1

Вам нужно будет создать отдельный файл, содержащий содержимое div (в этом примере pagesource.php), а затем использовать асинхронную загрузку с AJAX.Смотрите jQuery.get

$('#item').click( function() {
    // Load page the first time it is clicked (assuming the inner HTML of the div is blank)
    if( $('#item2').html() == '' ) {
        $.get( 'pagesource.php', function(data) {
            $('#item2').html(data);
        });
    }
    $('#item2').toggle();
});

Answer 2

Вам нужно использовать Ajax для этого. Когда пользователь нажимает кнопку, загружает содержимое асинхронно, а после завершения загрузки показывает его.

Answer 3

Определенно вы можете:

$(document).ready(function(){
   $('#item').click(function(){
          //This line will create 'item2' div dynamically
          $('<div id="item2" />').hide().appendTo("body").toggle();
   });
});

Если вы хотите проверить, существует ли он, вот вам:

$(document).ready(function(){
   $('#item').click(function(){              
          $item2 = $("#item2");
          if($item2.size() == 0) //Will create item2 if it doesn't exist
             $item2 = $('<div id="item2" />').hide().appendTo("body");
          $item2.toggle();
   });
});

Надеюсь, это поможет.Приветствия