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调用更改了所选选项，选择之前选择的选项就不会触发更改事件。例如：

选择“选项2”：显示提醒“option2”
执行AJAX呼叫：完成后，选择“选项1”并显示警告“option1”
选择“选项2”：没有任何反应

我知道这是Chosen的一个问题，因为如果我使用普通的select它可以正常工作（在上面的第3步，我会得到一个警告说“option2”，就像我应该的那样）。但正如您所看到的，当AJAX调用更改所选选项时，我正在使用.trigger("liszt:updated")更新select，所以我不明白为什么这不起作用。

Answer 1

事实证明这是Chosen 0.9.8（当前版本）中的合法错误。我更新到cutting-edge version（未正式发布）并且问题已经纠正，没有其他更改。

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

1 个答案: