jquery/javascript 여러 번의 클릭 기능이 코딩 순서대로 작동합니다.

Question

그래서 오른쪽에 주 div와 3 개의 작은 div가 있고, 각 div에는 이미지가 들어 있습니다. 내 목표는 작은 div 이미지 중 하나를 클릭하면 주 div의 내용이 변경됩니다. 나는 이것을 할 수 있지만 첫 번째 div를 먼저 클릭하지 않으면 두 번째 및 세 번째 div가 작동하지 않습니다. 첫 번째 div를 클릭하면 모든 div가 작동합니다.

<script type="text/javascript" language="javascript"> 
$(document).ready(function() { /// Wait till page is loaded 

    $('#divright1').click(function(){ 
     $('#divmainleft').load('sidechange1.php #content', function() { 
      $('#divright2').click(function(){ 
       $('#divmainleft').load('sidechange2.php #content', function() { 
        $('#divright3').click(function(){ 
         $('#divmainleft').load('sidechange3.php #content', function() { 
          /// can add another function here 

미리 감사드립니다.

오케이 이렇게 변경된 코드 ... 왜 이것이 작동하지 않습니까? 첫째 사업부는 다음 작동 두 번째와 세 번째 DIV 만 클릭 기능을 클릭하면 왜

<script type="text/javascript" language="javascript"> 
$(document).ready(function() { /// Wait till page is loaded 

    $('#divright1').click(function(){ 
     $('#divmainleft').load('sidechange1.php #content', function() }) 
    $('#divright2').click(function(){ 
     $('#divmainleft').load('sidechange2.php #content', function() }) 
    $('#divright3').click(function(){ 
     $('#divmainleft').load('sidechange3.php #content', function() }) 
/// can add another function here 

}); //// End of Wait till page is loaded 
</script> 

Answer 1

구문 오류가 있습니다. 공란을 아래 코드로 채우십시오. 각 클릭 이벤트를 닫고 load 메서드의 click 이벤트 콜백 내에서이 이벤트를 닫아야합니다.

$(document).ready(function(){ 
    //click event and load for div 1 
    $('#div1').click(function(){ 
     $('#mainleft').load('script.php', '#content'); 
    }); 

    //click event and load for div 2 
    $('#div2').click(function(){ 
     $('#mainleft2').load('script.php', '#content'); 
    }); 

}); 

Answer 2

먼저 사업부의 클릭 함수 내에서 두 번째와 세 번째의 div 클릭 함수를 정의하고 있기 때문에 이런 일이, 즉이다.