Question

我有一个奇怪的JS问题。

我已经建立了一个内容管理系统。在旧版本中都运行良好。更改了设计，实现了jquery ui主题，并将jquery升级到最新版本。现在#menu选择框的更改事件根本不起作用。萤火虫也没有错误。以下屏幕截图取自Visual event结果。

旧版。如您所见，＃menu select-box

有更改事件

enter image description here

新版。标题上的奇怪点击事件从无处出现。并且#menu选择框

没有更改事件

enter image description here

HTML标记看起来像那样

...
          <select name="menu" id="menu">
              <option value="" selected="selected">Select One</option>
              <option value="1">sample 1</option>
              <option value="2">sample 2/option>
            </select>
...

JS Side（pgsettings.js）

$(document).ready(function () {
    $("#parent").hide();
    $("#options").hide();
    $("input:submit").button();
    $('#menu').selectmenu();
    $("#options" ).buttonset();
    $("#menu").change(function () {
        var selectedmenu = $(this).val();
        if (selectedmenu != '' && selectedmenu != '0') {
            var parentcheck = $(".parentcheck:checked").val();

            $("#options").show();
            if (parentcheck === "1") {
                genOpts(selectedmenu);
            }
        }
        else {
            $("#options").hide();
            $("#parent").combobox("destroy");
            $("#parent").hide().find('option:selected').removeAttr('selected');
            $(".parentcheck").removeAttr("checked").button("refresh");

        }
    });


    $(".parentcheck").change(function () {
        var selectedmenu = $("#menu").val();
        if ($(this).val() === "0") {
            $("#parent").combobox("destroy");
            $("#parent").hide().find('option:selected').removeAttr('selected');         
            $("#menu").change();
        }
        if ($(this).val() === "1") {
            $("#parent").combobox("destroy");
            $("#menu").change();
        }
    });
});

我真的找不到我做错的地方。也许我把所有的jscript文件放在文件的末尾？ new version和old version的整个html标记如果有人想看看我的问题，我可以给我的teamviewer id。（我建议它，因为我没有网站的网址来显示问题的实际行动。我只能与您分享本地网站）

Answer 1

selectmenu插件干扰了原始代码。您需要绑定插件本身的change事件，而不是select。查看selectmenu插件的api，了解如何绑定到其更改事件。

编辑：我们在聊天室讨论了这个问题，问题最终成了重复的ID。

Answer 2

我会给你一个建议。

您根本没有使用本地变量，而 会降低代码速度

例如：

$(document).ready(function () {
    $("#parent").hide();

写

$(document).ready(function () {
    var parent = $("#parent");
    parent.hide();

因此，您在呼叫$("#parent")的该区块的其他任何地方都可以拨打parent

考虑一下，每次用jQuery选择#parent时，你都会运行那个选择器引擎魔术，如果你把它存储为局部变量，你只需要选择一次元素。

奇怪的JS问题

2 个答案: