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

Two jQuery/JavaScript functions not being called

本文关键字：调用 函数 jQuery JavaScript 两个      更新时间：2023-09-26

我有一个可用的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));
            }

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

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

我没有访问您的HTML的权限，所以我在这里只是猜测，但您正在使用一个select元素，并使用这个选择器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));
    }
}

使用此：

$("#up").on("click", MoveDown);

更多详细信息请点击此处：

相关文章：