jQuery Selected：更改事件不会从 AJAX 调用触发

Question

我在页面上使用jQuery Chosen，每次选择新选项时都要运行一个函数。该函数隐藏父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调用：完成后，选择"Option 1"并显示警报"option1">
3. 选择"选项2"：什么都不发生

我知道这是Chosen的一个问题，特别是因为如果我使用普通的select，它会很好地工作(在上面的第3步，我会收到一个警报，上面写着"option2"，就像我应该的那样)。但正如您所看到的，当AJAX调用更改所选选项时，我使用.trigger("liszt:updated")来更新select，所以我不明白为什么这不起作用。

Answer 1

事实证明，这是Chosen 0.9.8(当前发布版本)中的一个合法错误。我更新到了最新版本(未正式发布)，问题自行解决，没有其他更改。