jQuery로 계단식 선택 상자

html 선택 상자 및 jQuery 아약스 게시물과 연계하고 싶습니다. 옵션을 선택하면 다른 파일에 자신의 값을 보내고 json 값을 얻습니다. 예, 저는 아약스 게시물로이 작업을 수행합니다. 하지만 콜백 함수에서 나는 선택 상자를 추가하여 모든 jSON 데이터를 설정합니다. 그리고이게 내가 제대로하는거야. 하지만 내가 선택한 선택 상자에서 옵션을 선택하면이 새로운 선택 상자를 처리하지 jQuery 'change'이벤트 및 결국 다른 기능을 작동하지 않습니다.jQuery로 계단식 선택 상자

$(document).ready(function(){ 

    $("#kategoriler select").on('change',function(e){ 

     var catID = $(this).val(); 

     if($(this).next().is("select")){ 
      $(this).nextAll("select").remove(); 
     } 

     console.log($(this)); 
     $.ajax({ 
      async: false, 
      type: "POST", 
      url: "ajax_cate_add", 
      data: "catID=" + catID, 

      success: function(data){ 

       if(data.length > 0){ 

        var $parent = $("#kategoriler select:last").after("<select></select>").next(); 

        for(var i = 0; i < data.length; i++){ 
         $parent.append("<option value=" + data[i].id + ">" + data[i].tr_adi + "</option>"); 
        } 
       } 
      } 
     }); 
    }); 
});

시작 HTML 코드는 다음과 같습니다 :

<div id="kategoriler"> 
    <select> 
     <option value="8">Rezervasyon</option> 
     <option value="7">E-Concierge</option> 
     <option value="6">Özel F?rsatlar</option> 
     <option value="5">Safira SPA &amp; Sa?l?k</option> 
     <option value="4">Toplant? &amp; Davetler</option> 
     <option value="3">Yeme &amp; ?çme</option> 
     <option value="2">Odalar &amp; Süitler</option> 
     <option value="1">Genel Bak??</option> 
    </select> 
</div>

하지만 콘솔에 내가 그것을 실행중인 코드에 따라 입력 할 때 :에서

$("select").change(function(){ 
     alert(2); 
});

내 jQuery를 코드는 다음입니다 루트 선택 상자 옵션을 선택하고 위 코드 뒤에 콘솔을 입력하고 새 선택에서 옵션을 선택하십시오. 이 코드가 작동하고 경고 메시지를 표시합니다.

출처

2013-07-16 Mesuti

바인딩 할 때, 즉 변경 핸들러를 만들 때 요소 (select 요소)는 (동적으로 생성되는 것처럼) DOM에 존재하지 않습니다. 따라서 바인딩 할 요소가 없으므로 change 처리기를 바인드하지 않습니다. 따라서 하나의 간단한 솔루션은 위임을 사용하는 것입니다. 이제는 위임을 사용하면 요소 작성시기에 관계없이 핸들러가 요소에 지정됩니다. 이것은 당신을 위해 트릭을해야합니다.

추신 : 이동 중에도 (동적으로) 요소를 만들어야 할 때마다 위임을 시도하고 사용해야합니다.

출처

2013-07-16 20:45:57 user1

이 답장을 보내 주셔서 감사합니다. jQuery에서 bind-live-delegate를 연구하고 새로운 주제를 배웁니다. – Mesuti

이것이 도움이 되었다면, 체크 버튼을 클릭하고 대답으로 표시하는 것을 고려해야합니다. :) – user1

이것은 내 문제를 해결하지 못했지만 생각을 떠올 렸습니다. "대리인"함수를 사용하여이 문제를 해결합니다. – Mesuti

jQuery로 계단식 선택 상자

답변

관련 문제