javascript - 奇怪的 JS 问题

Question

我遇到了一个奇怪的 JS 问题。

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

旧版本。如您所见，#menu 选择框有更改事件

和新版本。标题上奇怪的点击事件不知从何而来。并且 #menu 选择框没有更改事件

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 端 (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 的整个 html 标记和 old version如果有人想看看我的实际问题，我可以提供我的 teamviewer ID。 (我建议这样做是因为我没有网站的网址来显示实际问题。我只能与您分享本地网站)

Answer 1

selectmenu 插件会干扰您的原始代码。您将需要绑定(bind)到插件本身的更改事件，而不是选择。查看 selectmenu 插件的 api，了解如何绑定(bind)到其更改事件的说明。

编辑:我们在聊天室讨论过这个问题，最终问题是 ID 重复。