I have a shopping cart that calculates cost and shipping based on quantity and weight. Because of this there are two possible shipping options and I have a function to auto-select the correct shipping on page load. However, if a person changes the quantity the function to select the shipping must run again.

To do this I tried this code:

$('.cartInputText').on('change', function() {   
    $('#ShippingOptions option').each(function(){
        if (this.value == '163182') {
            $('#ShippingOptions option[value="163182"]').prop('selected', true)
            return false;
        }
        if (this.value == '163183') {
            $('#ShippingOptions option[value="163183"]').prop('selected', true)
            return false;
        }
    });
});

This works the first time I change the quantity. If I change the quantity a second time it doesn't work. How do I fix this so no matter how many times I change the quantity it works?

Update

The onchange event fires the first time but does not fire the second time. Why?

I have a shopping cart that calculates cost and shipping based on quantity and weight. Because of this there are two possible shipping options and I have a function to auto-select the correct shipping on page load. However, if a person changes the quantity the function to select the shipping must run again.

To do this I tried this code:

$('.cartInputText').on('change', function() {   
    $('#ShippingOptions option').each(function(){
        if (this.value == '163182') {
            $('#ShippingOptions option[value="163182"]').prop('selected', true)
            return false;
        }
        if (this.value == '163183') {
            $('#ShippingOptions option[value="163183"]').prop('selected', true)
            return false;
        }
    });
});

This works the first time I change the quantity. If I change the quantity a second time it doesn't work. How do I fix this so no matter how many times I change the quantity it works?

Update

The onchange event fires the first time but does not fire the second time. Why?

• javascript
• jquery
• onchange

Share Improve this question Follow edited Apr 19, 2014 at 5:10 L84 asked Apr 19, 2014 at 5:01 L84L84 46.3k5959 gold badges181181 silver badges259259 bronze badges 6

• 1 Could you post a fiddle here? – chris97ong Commented Apr 19, 2014 at 5:02
• @chris97ong - A fiddle wouldn't replicate how my CMS loads and renders the shopping cart unfortunately. – L84 Commented Apr 19, 2014 at 5:06
• Which version of jQuery you use? 1.7 or 1.9. – OQJF Commented Apr 19, 2014 at 5:09
• Do you have a chance to bind event to document? I mean the difference between live and on in version 1.7 – OQJF Commented Apr 19, 2014 at 5:12
• 1 $(document).on('change','.cartInputText',function(){}); more like this. – OQJF Commented Apr 19, 2014 at 5:19

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

Please use live instead of on, or if the version of jQUery is higher than 1.9, please make you code like this: $(document).on('change','.cartInputText',function(){});

For your sample code, you only bind the function to .cartInputText, if the page re-renders or whatever the reason cause .cartInputText re-generate, it loses the function.

For my code, I bind the function to document and I think you know the event of html element can bubble, you click on .cartInputText and it bubbles up to document and let the function be triggered. More, please check Live and Bind difference in jQuery.

User KeyUp function instead of change for detecting input text.

Like:

$('.cartInputText').keyup(function () {
    alert('test');
});

Here's the official jQuery documentation for .keyup().

DEMO

the above code works for the html code which is added before executing the previous statements,

if some other content with the same class (cartInputText) is added dynamically you need to assign above functionality by calling it again after adding the content.