2014-03-25 6 views
0

선택 옵션에 문제가있는 이유는 무엇입니까? jQuery - 중복 아약스 쿼리

복제하는 방법 :

먼저 변경 선택에 추가 버튼을

  1. 클릭
  2. 시도합니다. 첫 번째 변경 후 아무것도 발생하지 않음

    b. 두 번째 변경 후 ajax 쿼리를 실행합니다.

    c. 세 번째 변경 후, 두 번 ajax 쿼리를 실행합니다.

    d. 네 번째 변경은 같은 세 가지 질문을 발생시킵니다 ...

무엇이 잘못 되었나요? 내가 실수 한 곳? 여기

이다 jsfiddle

<button type="button" class="btn btn-primary btn-sm" id='ql_add_case_schema'><i class="fa fa-plus-square"></i> Add case</button> 

<div id='ql_div_cases'></div> 

$("#ql_add_case_schema").on("click", function() { 
    var select ='<div>'; 

      select +='<select class="skill" name="skill">'; 
       select +='<option value="" selected>--</option>'; 
       select +='<option value="case1">Case 1</option>'; 
       select +='<option value="case2">Case2</option>'; 
      select +='</select>'; 

      select +='<select class="process" name="process">'; 
       select +='<option value="">--</option>'; 
      select +='</select>'; 

      select +='<select class="reason" name="reason">'; 
       select +='<option value="">--</option>'; 
      select +='</select>'; 


      select +='<select class="action" name="action">'; 
       select +='<option value="">--</option>'; 
      select +='</select>'; 

     select +='</div>'; 

    $('#ql_div_cases').append(select); 
}); 

/* For multiple jquery.chained.js */ 
$('#ql_div_cases').delegate('select', 'change', function(){ 
     //console.log('click'); 

     $(".process").each(function() { 
      $(this).remoteChained($(".skill", $(this).parent()), "pytania/getCases"); 
     }); 

     $(".reason").each(function() { 
      $(this).remoteChained([ 
       $(".skill", $(this).parent()), 
       $(".process", $(this).parent()) 
      ], "pytania/getCases"); 
     }); 

     $(".action").each(function() { 
      $(this).remoteChained([ 
       $(".skill", $(this).parent()), 
       $(".reason", $(this).parent()), 
       $(".process", $(this).parent()) 
      ], "pytania/getCases"); 
     }); 

}); 

답변

1

문제 삼분 몇번 만 첫번째 선택 후보다는 생성시 체인 기능을 수행하지만, 그 두 번째 선택 후 다시 사슬이고 선택. 생성시 최소한 첫 번째 항목을 연결해야합니다.

$("#ql_add_case_schema").on("click", function() { 
    var select = '<div>'; 

    select += '<select class="skill" name="skill">'; 
    select += '<option value="" selected>--</option>'; 
    select += '<option value="case1">Case 1</option>'; 
    select += '<option value="case2">Case2</option>'; 
    select += '</select>'; 

    select += '<select class="process" name="process">'; 
    select += '<option value="" selected>--</option>'; 
    select += '<option value="case1">Case 1</option>'; 
    select += '<option value="case2">Case2</option>'; 
    select += '</select>'; 

    select += '<select class="reason" name="reason">'; 
    select += '<option value="" selected>--</option>'; 
    select += '<option value="case1">Case 1</option>'; 
    select += '<option value="case2">Case2</option>'; 
    select += '</select>'; 


    select += '<select class="action" name="action">'; 
    select += '<option value="" selected>--</option>'; 
    select += '<option value="case1">Case 1</option>'; 
    select += '<option value="case2">Case2</option>'; 
    select += '</select>'; 

    select += '</div>'; 

    $('#ql_div_cases').append(select); 

    $(".action").each(function() { 
     $(this).remoteChained([ 
     $(".skill", $(this).parent()), 
     $(".process", $(this).parent()), 
     $(".reason", $(this).parent()), 
     $(".action", $(this).parent())], "pytania/getCases"); 
    }); 
}); 

결과 :

GET pytania/getCases?skill=case1&process=&reason=&action= 

jsfiddle : http://jsfiddle.net/X3z4p/

다음 작품 같은 것을 할 수있는 경우에 다시 빈 값을 전달할 수 있지만 있는지 확실하지 않습니다