jquery and php : 클릭 할 때 특정 div 항목을로드하는 방법

Question

클릭 할 때 특정 div 항목을 전환하는 방법을 알고 있지만 특정 항목을 아직로드하지 않으려면 어떻게해야합니까? 페이지에 숨기 만하지 않고 클릭 할 때까지 페이지를로드하지 않습니까? 내가 클릭 할 때까지로드하지 않으려는,

나는

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

모든 것을로드 및 클릭 할 때까지 #의 항목 2 만 숨겨 질 것이라는 점을 알고있다, 그러나 나는 항목을 숨기려하지 않습니다. 대형 파일이 많으면 페이지 속도가 느려지므로이 작업을 수행하고 있습니다. 이 작업을 수행 할 수 있습니까? #item을 클릭 한 다음 # item2를로드합니까?

Answer 1

div (이 예에서는 pagesource.php)의 내용을 포함하는 별도의 파일을 만든 다음 AJAX에 비동기 적재를 사용해야합니다.

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

존재하는 경우 검사 할 경우

이 여기에 당신이 가지고 :

$('#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

jQuery.get이 Definetely을 수행 할 수 있습니다 참조하십시오이 도움이

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

희망을. 환호