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，所以我只是在这里猜测，但您正在使用 select 元素并使用此选择器 option[selected]。您可能正在尝试获取选定的元素，但这并没有达到您想要的效果。它选择具有selected 属性的选项。您的 HTML 可能没有它。

您要使用的是 :selected :它将获取选定的选项。使用它:

function MoveDown() {

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

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

        $(selectedOption).remove();

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

    }

}