Question

我知道标题令人困惑。我有一个下拉，我通过ajax加载DOM后填充。当用户用鼠标单击某个选项或用键盘选择选项时，我还附加了一个on change事件来捕获。

        $("#selTemp").one("change", function () {
            $(this).click(function () {
                alert("click event fired");
            });
            $(this).keypress(function (e) {
                if (e.which == 13) {
                    alert("enter key event fired");
                }
            });
        });

我遇到了一些关于按键触发3次或更多次的问题，直到我将.on更改为.one以确保它只触发一次。现在我有一个问题，如果我通过鼠标点击选择和选项，然后我尝试再次点击下拉菜单更改我的选择，点击事件将立即触发，不允许我选择其他选项。

<label for="selTemp">Temp</label>
<select id="selTemp" class="form-control">
    <option>Select Disaster</option>
</select>

自从我以前做过这件事之后，我感到很茫然，并且没有遇到过这个问题。唯一的区别是我在MVC站点中执行此操作，并且正在通过此方法加载脚本：

@section Scripts{
    <script>
        //some script
    </script>
}

是否多次加载脚本？

Answer 1

所以看起来，由于不同浏览器在用户选择选择并随后使用箭头键进行导航时处理键盘功能的方式，我需要寻找另一种更易于访问的解决方案。我已经决定添加一个带有click事件的按钮，然后查找用户选择的选项。

这篇文章更详细地解释了为什么这个解决方案更容易获取：

http://pauljadam.com/blog/onchange-event-on-a-select-inputjump-menu-accessibility-problems/

以下是代码，以防任何人需要它（非常简单）：

HTML

    <form class="form-inline" role="form">
        <div class="col-md-12">
            <select id="selTemp" class="form-control">
                <option>Select Temp</option>
            </select>
            <button id="btnGetStuff" type="button" class="btn btn-primary">Get Some stuff</button>
        </div>   
    </form>

的jQuery

    $("#btnGetStuff").on("click", function () {
        var temp = $("#selTemp option:selected").val();
    });

当选项已经选中时，jQuery选择单击触发时的更改

1 个答案: