내 페이지에 jQuery Chosen을 사용하고 있으며 새 옵션을 선택할 때마다 기능을 실행하고 싶습니다. 이 함수는 부모 div
에있는 자식 div
을 모두 숨긴 다음 선택한 옵션에 해당하는 것을 표시합니다.jQuery Chosen : AJAX 호출에서 변경 이벤트가 발생하지 않습니다.
HTML :
<select id="settings-select" data-placeholder="Choose…" class="chzn-select">
<option value="setting1">Option 1</option>
<option value="setting2">Option 2</option>
<option value="setting3">Option 3</option>
<option value="setting4">Option 4</option>
<option value="setting5">Option 5</option>
<option value="setting6">Option 6</option>
</select>
<div id="settings-tabs">
<div id="setting1" class="tab">...</div>
<div id="setting2" class="tab">...</div>
<div id="setting3" class="tab">...</div>
<div id="setting4" class="tab">...</div>
<div id="setting5" class="tab">...</div>
<div id="setting6" class="tab">...</div>
</div>
JS :
var settingsShow = function(){
var showPanel = $("#settings-select").find('option:selected').val();
$("#settings-tabs .tab").hide();
$("#" + showPanel).fadeIn("fast");
alert(showPanel);
}
$(document).ready(function(){
$("#settings-tabs .tab").hide();
$("#settings-select").chosen().change(settingsShow);
});
이 모든 좋은 지금까지 작동합니다 - 선택한 항목, settingsShow
가 호출 변경 될 때 (및 경고 표시가 그냥이 확인) . 여기
$("#settings-select").val("setting1").trigger("liszt:updated");
settingsShow();
문제입니다 : : 선택한 옵션은 이전에 선택한 옵션을 선택하면, 완성 된 AJAX 호출에 의해 변경되면
지금, 나는 또한이 완료되면 선택한 옵션을 변경하는 AJAX 호출이 더 이상 변경 이벤트를 발생시키지 않습니다.
- 선택 "옵션 2": 예를 들어 표시 경고 "옵션 2"
- AJAX 호출을 수행 완료시 "옵션 1"및 표시 경고 "옵션 1"
- 선택 "옵션 2"를 선택합니다 : 아무것도
나는 그것이 내가 대신 정상 select
를 사용하는 경우 잘 작동 특히 때문에 선택된에 문제가 알고있다 (위의 3 단계에서, 나는 내가해야처럼, "옵션 2"라는 경고를 얻을 것이다) 발생하지 않습니다. 그러나 볼 수 있듯이 .trigger("liszt:updated")
을 사용하여 AJAX 호출이 선택한 옵션을 변경하면 select
을 업데이트하므로이 옵션이 작동하지 않는 이유는 알 수 없습니다.