Javascript only firing once

Question

long-time lurker here asking my first public questions because I am truly stuck.

I'm working on a hosted shopping cart platform so I only have access to add code in certain designated divs. I have a javascript code that I'm calling externally (because inline is bad unless you have to, right?)

So my issue is, There is a <select> dropdown that I do NOT have direct access to change HTML and the silly shopping cart platform didn't give it an id, only the name attribute is set.

I need to clear the <div id="result_div"> when the <select name="ShippingSpeedChoice"> drop-down is clicked so I have:

$("[name=ShippingSpeedChoice]").change(function(e) { $("#result_div").empty(); });

It fires once, but that's it. My question is, how do I make it fire EVERY TIME the <select name="ShippingSpeedChoice"> is clicked?

Here's all the relevant javascript (in case it's preventing #result_div from clearing somewhere):

    $("[name=ShippingSpeedChoice]").change(function(e) {
        $("#result_div").empty();
    });

    $("#btn_calc").click(function(e) {      /// onclick on Calculate Delivery Date button

Thanks in advance, any help is appreciated!

Answer 1

I still wasn't able to use the name attribute to call the function, so I found a way around it by using the id of the td the ShippingSpeedChoice dropdown was in:

    $("#DisplayShippingSpeedChoicesTD").change(function(e) {
        $("#result_div").empty();

And it fires every time now. Thank you so much for all your feedback & assistance - I still wish I could figure out how to use the name attribute rather than the id, but that will be a puzzle for another day!

Answer 2

If you want something to happen every time the element is clicked, use .click() rather than .change(). The latter only fires if they select a different value from the menu than it had before.

$("[name=ShippingSpeedChoice]").click(function(e) { $("#result_div").empty(); });

Answer 3

First of all, I'd probably try and setup the shopping cart select to have an id.

$("[name=ShippingSpeedChoice]").id = 'shopping_cart_select';

then try binding the "change" function to the element via it's id.

$('#shopping_cart_select').bind('change', function(){
//rest of code goes here
}