Question

I’m having a strange JS issue.

I’ve built a content management system. In the old version all worked well. Changed design a bit, implemented jquery ui theme, and upgraded jquery to the latest version. Now the change event for #menu select box doesn’t work at all. Also there is no error on firebug. The screenshots below is taken from Visual event results.

The old version. As you see there is change event for #menu select-box

And new version. The strange click event on the title appeared from nowhere. And there is no change event for #menu select box

HTML Markup Looks like that

...
          <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>
...

The 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();
        }
    });
});

I really can’t find where I did wrong. Maybe I placed all jscript files at the end of the file? The whole html markup for new version and old version If someone wants to take a look at my problem in action, I can give my teamviewer id. (I’m suggesting it because I have no url for the website to show the problem in action. I can share with you only local website)

Answer 1

The selectmenu plugin is interfering with your original code. You will need to bind to the change event of the plugin itself, not the select. Look at the api for the selectmenu plugin for instructions on how to bind to its change event.

Edit: We discussed this in a chat room, the problem ended up being duplicate id’s.