Question

I’m trying to add categories to a drop down list using jQuery Ajax. When an option is selected I would like to load the subcategories.

The problem that I’m facing is that the addition of options to the drop down list by the Ajax function seems to trigger the change event as well. How can I avoid this or rewrite my code better in order to avoid this behavior?

Here’s my code:

categoryHelper.loadLevel1 = function () {

    // The control that needs to be filled with categories
    var $control = $("#select1");

    // This function runs $.getJSON() and fills the drop down list
    // with option elements
    fillDropDown(url, null, $control); 

    // When I select a value I want to run the function loadLevel2 which
    // takes the currently selected value from level 1 as parameter
    $control.change(categoryHelper.loadLevel2($control.val()));
};

Code for the fillDropDown:

function fillDropDown(url, parameters, dropdown) {
///     all data has been loaded</param>
    $.getJSON(url, parameters, function (data) {
        $(dropdown).empty();
        $(dropdown).append(createOption("", ""));
        $(data).each(function () {
            $(dropdown).append(createOption(this.value, this.text));
        });
    });
}

All help is appreciated!

Answer 1

This line:

$control.change(categoryHelper.loadLevel2($control.val()));

will pass the result of calling categoryHelper.loadLevel2($control.val()) to .change(); if that isn’t a function, then you’re not going to be adding an event handler to the element but instead triggering any event handlers that are already bound. Change it to:

$control.change(function() {categoryHelper.loadLevel2($control.val())});

so that you’re actually passing a function to .change(), and it should work.