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（当前发行版）中的合法错误。 我更新到了最新版本 （未正式发布），并且此问题得以纠正，没有进行其他更改。