Question

hoping you can help… This is driving me MAD!!!

I have 2 select boxes where jquery gets values from the boxes to update various tables on my homepage.

The first one (currency) works absolutely fine.
The second one works the first time, but any subsequent changes to the site and the onchange is not picked up!!!

Any help would be much appreciated.

Link to site: http://bit.ly/10ChZys

jQuery("#changeCoinCountrySelect").change(function(){
    var country = jQuery('#changeCoinCountrySelect option:selected').val();
    jQuery("#coinTable").load("http://.../.../.../.../tables.php?country="+country);
});

The select which works as it should is with id=changeCurrencySelect the select which only works for at most 1 update is with id=changeCoinCountrySelect

What is supposed to happen is that the when the country is changed, the table refreshes with the correct countries coins. This happens once. Then when I try to select another country, it stops working.

Answer 1

Since you are replacing the HTML of a parent element (#coinTable) your change event is removed along with the old HTML at each AJAX call.

jQuery("#coinTable").on("change", "#changeCoinCountrySelect", function(){
    var country = jQuery(this).val();
    jQuery("#coinTable").load("http://goldealers.co.uk/wp-content/plugins/gd/tables.php?country="+country);
});

More info: http://api.jquery.com/on/#direct-and-delegated-events