jQuery選擇：更改事件不會從AJAX調用中觸發

Question

我在頁面上使用的是jQuery Chosen ，並且每次選擇一個新選項時都想運行一個函數。 該函數將所有子div都隱藏在父div ，然后僅顯示與所選選項相對應的子div 。

HTML：

<select id="settings-select" data-placeholder="Choose&hellip;" 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 （並且會顯示警報來確認這一點）。

現在，我還有一個AJAX調用，它會在完成時更改選定的選項：

$("#settings-select").val("setting1").trigger("liszt:updated");
settingsShow();

問題是：完成的AJAX調用更改了所選選項后，選擇先前選擇的選項將不再觸發更改事件。 例如：

1. 選擇“選項2”：顯示警報“選項2”
2. 執行AJAX調用：完成后，選擇“選項1”並顯示警報“選項1”
3. 選擇“選項2”：沒有任何反應

我知道這是Chosen的一個問題，特別是因為如果我改用普通的select它會很好地工作（在上面的第3步中，我會收到警告說“ option2”，就像我應該的那樣）。 但是正如您所看到的，當AJAX調用更改了選定的選項時，我正在使用.trigger("liszt:updated")更新select ，所以我不明白為什么這不起作用。

Answer 1

事實證明，這是選擇的0.9.8（當前發行版）中的合法錯誤。 我更新到了最新版本 （未正式發布），並且此問題得以糾正，沒有進行其他更改。