동적 "선택된"선택 요소로드 중

Question

jQuery 플러그인을 사용하고 있습니다 (수확 전). 그것은 (문서) .ready 잘 작동하지만, 클릭하면, 나는 "선택한"기능을 사용하고자하는 더 많은 선택 개체를 동적으로 생성하는 아약스를 사용합니다. 그러나 원래의 select 요소 만 "선택한"기능을 가지고 있고 새로운 (동적으로 만들어진) 요소는 작동하지 않습니다. jQuery.get을 사용하여 새 요소를 추가합니다. 여기에 코드의 샘플입니다

jQuery(".select").chosen();//this one loads correctly 
jQuery("#add-stage").click(function() { 
    jQuery.get('/myurl',{},function(response) { 
      //response contains html with 2 more select elements with 'select' class 
      jQuery('#stages').append(response); 
     jQuery(".select").chosen();//this one doesn't seem to do anything :-(
    }); 
}); 

내가 어딘가 .live() 함수가 필요하다고 생각했다,하지만 난 아직 그것을 알아낼 수 없었다. 어떤 도움을 많이 주시면 감사하겠습니다!

주 -trigger("liszt:updated");

Answer 1

가 response 요소가 select 클래스가 있는지 확인합니다 사용 설명서에 명시된대로 나는 동적으로 새로운 옵션을로드하려고하고 있지 않다.

console.log(response); // to verify 

새 요소에만 플러그인을 적용하는 것도 좋은 방법입니다. /myurl는 전체 HTML 문서를 반환하는 경우

jQuery(".select").chosen(); 

jQuery("#add-stage").click(function() { 
    jQuery.get('/myurl',{},function(response) { 
     console.log(response); // verify the response 

     var $response = $(response); // create the elements 

     $response.filter('.select').chosen(); // apply to top level elems 
     $response.find('.select').chosen(); // apply to nested elems 
     $response.appendTo('#stages'); 
    }); 
}); 

또한, 당신은 예측할 수없는 결과를 얻을 수 있습니다.

Answer 2

나는 Chosen과 비슷한 문제가있었습니다. 사용자가 링크를 클릭 한 후 동적으로 새 선택 항목을 추가하려고했습니다. 이전 선택을 복제 한 다음 복제를 추가했지만 선택 옵션이 작동하지 않습니다. 당신은 아약스와 선택 사용할 수 있습니다

clonedSelect.find('select').removeClass('chzndone').css({'display':'block'}).removeAttr('id').next('div').remove(); 
mySelect.after(clonedSelect); 
clonedSelect.find('select').chosen(); 

Answer 3

한 가지 방법 :이 솔루션은, 선택한 클래스와 추가 요소를 제거, DOM 내의 복제를 넣고 다시 선택 실행하도록했다

$.ajax({ 
    url: url, 
    type: 'GET', 
    dataType: 'json', 
    cache: false, 
    data: search 
}).done(function(data){ 
    $.each(data, function(){ 
    $('<option />', {value: this.value, text: this.text}).appendTo(selectObj); 
    }); 
    chosenObj.trigger('liszt:updated'); 
}); 

selectObj입니다 특정 선택 개체

그러나 ...

선택한 매우 나쁜 구현됩니다. 몇 가지 시각적 인 버그가 있습니다 : 몇 가지 옵션을 선택한 다음 새 옵션 검색을 시작한 다음 선택 항목을 제거하고 계속 입력하십시오. '일부 옵션 검색 값 선택'과 같이 확장 된 '일부 옵션 선택'이 표시됩니다. JQuery 체인을 지원하지 않습니다. AJAX를 구현하려고하면 선택한 포커스가 느슨해지면 입력 된 텍스트가 사라지고 이제 다시 클릭하면 일부 값이 표시됩니다. 일부 값을 선택할 때 'blur'이벤트를 사용할 수 없으므로 해당 값을 제거하려고 할 수도 있지만 'blur'이벤트를 사용할 수 없기 때문에 어려울 것입니다. AJAX에서는 특히 전혀 선택하지 않는 것이 좋습니다.

Answer 4

1- 다운로드 Livequery plugin 페이지에서 호출하십시오.

2 .- 크라켄 해제 :이 동적으로 아약스 때마다 사용하는 새로운 옵션 형태로 데이터베이스를로드 선택된의 예입니다이

$(".select").trigger("chosen:updated"); 

Answer 5

을 선택되었습니다.

$('.my_chonsen_active').chosen({ 
    search_contains:true 
}); 
$('.my_chonsen_active').on('chosen:showing_dropdown', function(evt, params){ 
    id_tosend=$(this).attr("id").toString(); 
    $.get("ajax/correspondance/file.php",function(data){ 
    $('#'+id_tosend).empty(); 
    $('#'+id_tosend).append(data); 
    $('#'+id_tosend).trigger("chosen:updated"); 
    }); 
}); 

Answer 6

을에 .write (선택 채우기)을 코드 뒤에 $(".select").livequery(function() { $(this).chosen({}); });