select change event is triggering multiple times

Question

Very strange thing is happening with the 'change' event of the dropdown list.

Basically I have a dropdown, on change of which i have to do some cross domain web service call. This call is being made from the javascript itself.

For the first time when i change an item in the 'select' list the change event is triggered only once. Next time twice and it grows like this.

Any clue why is it behaving like this?

If code needed for reference i can share. But its a simple 'select' list and 'change' event handler there.

$("#ArtifactSort > select").change(function() {        

    var rankField= "";
    rankField = $("#ArtifactSort > select option:selected").text();

    alert('within select change event artifact: '+ rankField );

    //Making the text little lighter and showing the loading icon.
    //$("#ArtifactPetalContentUL").css("filter", "alpha(opacity: 30)");
    $loadingIconForArtifact = addLoadingIcon("ArtifactPetalContentUL", "Artifact");

    var refinedStoresLocal= new Array();
    for (var storeIndex in _searchResponseForArtifact.searchResult.searchRequestProcessed.stores) {
        refinedStoresLocal.push(_searchResponseForArtifact.searchResult.searchRequestProcessed.stores[storeIndex].name);
    }

    var refinedFiltersLocal = new Array();
    for (var filterIndex in _searchResponseForArtifact.searchResult.searchRequestProcessed.filters) {
        refinedFiltersLocal.push(_searchResponseForArtifact.searchResult.searchRequestProcessed.filters[filterIndex]);
    }

    //rankfield.
    var rankLocal=new Array();
    rankLocal.push(new RankingField(rankField, 1, 0));
    //Request object and WS Call.
    var _searchRequestForArtifactLocal = getArtifactSearchRequestObject(_queryStringLocal, _memberId, _communityId, _pageNumber, _pageSize, propertiesForArtifact, refinedStoresLocal, ClassificationClusteringObjectsForArtifact, refinedFiltersLocal, rankLocal);
    getSearchResponse("successcallForArtifact", _searchRequestForArtifactLocal);
});

Thanks Subrat.

Answer 1

You must be binding a new handler from within the change handler.. So, each time it runs, it adds an additional instance of the handler to be executed the next time..

Show us the handler you assign to the change event (and how you do it) for a more detailed answer..

[update]

From your code everything seems fine.. Do check the two functions you call though, ( addLoadingIcon and getSearchResponse ) in case they do any jQuery event binding, that might inadvertently apply to the select object..

Also check your RankingField constructor in case it binds any events ...

Answer 2

I had the same issue described by the OP. I found that Chrome Dev Tools helped me verify that it was a multiple event handler issue for me. Open the Dev Tools, use the element picker to select the 'select' object in question, and check on the Event Listeners tab for change handlers.