CODEWITHSUNDEEP
jquery
jasenmp
jasenmp

Reputation: 319

Issue with On Change Event Firing on Select

I have something weird happening. I'm attempting to fire an event when a option is selected. Right now I'm using alert() to test but it doesn't work unless one of the radio and/or check boxes above it are selected. Can anyone let me know what's happening?

The option group in question is 'bedrooms'

An example can be found here: bvp.dmediastudios.com/v3/

The jQuery

    if ($('input').is(':checked')) {

        // parent(1) = #harwidget, parent(2) = #homefinderform, parent(3) .frmRow - find .frmLabel
        $(this).parent().parent().parent().find('.frmLabel').addClass('frmLabelChecked');

        //$(this).parent().parent().parent().find('.frmInput').addClass('frmLabelCheckedInput');

    }

    // property type options

    $('#divBuyType').on('click', 'input:checkbox', function () {
        $(this).parent().parent().parent().parent().find('.frmLabel').toggleClass('frmLabelChecked', this.checked);
    });

    // select options w/ TWO select fields (ie listing price, square feet and year built)

    $('select[name=BEDROOM_NUM]').on('change', function() {
        alert('dedfdfd');
    })

Upvotes: 1

Views: 83

Answers (1)

Andy
Andy

Reputation: 14575

You missed a vital bit out of the code you showed, before your section of code is $('input').click(function () {, which means you are applying the event handler ($('select[name=BEDROOM_NUM]').on('change', function()) every single time you click an input.

If you spam click a checkbox, then try to to change the bedroom amount, you will notice you have several alerts. This is because you are binding it for every mouse click. Try moving

 $('select[name=BEDROOM_NUM]').on('change', function() {
   alert('dedfdfd');
 })

outside of the $('input').click(function () {

Upvotes: 1

Related Questions