我正在使用 jQuery Chosen在我的页面上,我想在每次选择新选项时运行一个函数。该函数隐藏父 div
中的所有子 div
,然后仅显示与所选选项对应的那个。
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
(并且会显示一个警报以确认这一点)。
现在,我还有一个 AJAX 调用,它会在完成时更改所选选项:
$("#settings-select").val("setting1").trigger("liszt:updated");
settingsShow();
问题是:一旦完成的 AJAX 调用更改了所选选项,选择之前选择的选项就不再触发更改事件。例如:
- 选择“选项 2”:显示警报“选项 2”
- 执行 AJAX 调用:完成后,选择“选项 1”并显示警报“选项 1”
- 选择“选项 2”:什么也不会发生
我知道这是 Chosen 的一个问题,因为如果我使用普通的 select
,它就可以正常工作(在上面的步骤 3 中,我会收到一条警告,上面写着“option2”,就像我应该做的那样) )。但正如您所看到的,当 AJAX 调用更改所选选项时,我使用 .trigger("liszt:updated")
来更新 select
,所以我不'不明白为什么这不起作用。
最佳答案
事实证明,这是 Chosen 0.9.8(当前发行版本)中的一个合法错误。我更新到cutting-edge version (未正式发布)并且问题自行纠正,没有进行其他更改。
关于jQuery 选择 : change event doesn't fire from AJAX call,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12478304/