Strange JS issue

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.

Answer 2

I'll give you a piece of advice.

You are not using local variables at all, and this will slow down your code

For example:

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

write

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

so everywhere else in that block you are calling $("#parent") you can call parent

Think about it, each time you select #parent with jQuery you are running that selector engine magic, where if you stored it as a local variable you would only have to select the element once.