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!

You want it to fire every time they click on it, even if they don't change the value? Bind it to the `click` event instead of the `change` event. — Barmar, Dec 20 '13 at 03:50
You should work on reducing the code in your question to a bare minimum. Plus you left out the HTML part. — j08691, Dec 20 '13 at 03:50
can you also check whether the select element is recreated between the first and the second clicks.... if so have a look at event delegation — Arun P Johny, Dec 20 '13 at 03:55
I'm not sure that would be the proper specification for a shopping cart, it wouldn't make much sense to update the screen if nothing has changed for the selection. Although he did use the wording "change everytime it is clicked" I do believe he might have meant something else. — Mike, Dec 20 '13 at 04:06
Also - I think you mean [5] here? ;) `FXONtransitdays[4] = "Friday"; FXONtransitdays[4] = "Saturday";` — brandonscript, Dec 20 '13 at 04:08

score 1 · Answer 1 · answered Dec 20 '13 at 03:52

1

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(); });

answered Dec 20 '13 at 03:52

Barmar

741,623
53
500
612

Hi Barmar, I've tried both `.click` and `.change` - honestly whether it fires on `.click` or `.change` I don't care, the point is that it only fires once, and it needs to fire EVERY time there is a change OR a click on – KateTheGreat Dec 21 '13 at 00:34
Can you make a fiddle? – Barmar Dec 21 '13 at 00:36
I tried to make a fiddle but there is so much external content (from the hosted shopping cart) that it didn't replicate reality. I ended up using the `id` of the parent element anyway. Thanks for your response! – KateTheGreat Jan 03 '14 at 04:02

Mike · Answer 2 · 2013-12-20T05:09:03.350

1

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
}

edited Dec 20 '13 at 05:09

answered Dec 20 '13 at 04:04

Mike

874
1
8
15

score 0 · Accepted Answer · answered Jan 03 '14 at 03:58

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!

Javascript only firing once

3 Answers3