javascript - 两个 jQuery/JavaScript 函数没有被调用

Question

我有一个工作的 MVC 应用程序，它由两个列表框和按钮组成，用于列表框的各种内容。以下脚本中的所有 jQuery 函数都正确执行，除了 MoveUp 和 MoveDown 从未被调用(设置断点)。 F12 控制台很干净，没有 JavaScript 错误。有问题的两个按钮是:

  <button type="button" id="up" onclick="MoveUp()">Up</button>

    <button type="button" id="down" onclick="MoveDown()">Down</button>

jQuery代码如下。 MoveUp 和 MoveDown 函数是否需要在“全局”函数内？

<script src="~/Scripts/jquery-2.1.1.js"></script>   
    <script>
        $(function () {
            $("#add").click(function () {
                $("#listBoxAvail > option:selected").each(function () {
                    $(this).remove();
                    val = $(this).val();
                    temp = $(this);
                    temp.val('L' + val)
                    $(temp).appendTo("#listBoxSel");
                });
            });

            $("#remove").click(function () {
                $("#listBoxSel > option:selected").each(function () {
                    $(this).remove().appendTo("#listBoxAvail");
                });
            });

            $("#remove-all").on("click", function(event) {
                $('#listBoxSel option').prop('selected', true);
                $("#remove").trigger("click");
            });

            $("#select-all").on("click", function(event) {
                $('#listBoxAvail  option').prop('selected', true);
                $("#add").trigger("click");
            });
        });

        function MoveDown() {

            var selectedOption = $('#listBoxSel > option[selected]');

            var nextOption = $('#lstBoxSel > option[selected]').next("option");

            if ($(nextOption).text() != "") {

                $(selectedOption).remove();

                $(nextOption).after($(selectedOption));

            }

        }

        function MoveUp() {

            var selectedOption = $('#lstBoxSel > option[selected]');

            var prevOption = $('#lstBoxSel > option[selected]').prev("option");

            if ($(prevOption).text() != "") {

                $(selectedOption).remove();

                $(prevOption).before($(selectedOption));

            }

Answer 1

您是说“从未调用 MoveUp 和 MoveDown”，但是“控制台很干净，没有 JavaScript 错误。”这确实意味着函数正在调用，否则，您会看到错误 undefined is not a function。

因此，根据这些信息，我们可以猜测错误出在您的函数中。由于您使用 jQuery，因此当 jQuery 对象为空时，它将静默失败(无错误)。

我无权访问您的 HTML，所以我只是猜测，但您正在使用一个选择元素并使用此选择器 option[selected]。您可能正在尝试获取所选元素，但这没有按照您的意愿行事。它选择具有属性 selected 的 option。您的 HTML 可能没有。

您要使用的是 :selected :它将获得选定的选项。使用那个:

function MoveDown() {

    var selectedOption = $('#listBoxSel > option:selected');
    var nextOption = selectedOption.next("option");

    if ($(nextOption).text() != "") {

        $(selectedOption).remove();

        $(nextOption).after($(selectedOption));

    }

}