Why doesn't jquerry script?

Is there a website on wordpress + woocommerce.
You need to make at checkout when you select the radiobutton "delivery by mail of Russia (other cities of the Russian Federation)" appeared 2 input City and zip code, any other radiobutton these input hiding.
website link - shellyshop.ru/checkout

Did this:
https://jsfiddle.net/8ndn8b7t/6/
In the example it works, when you put on a website, input just disappear always when any radiobutton.
August 19th 19 at 22:52
2 answers
August 19th 19 at 22:54
If you look in the inspector, you can see that change triggers the Ajax request, which completely updates the block.
And how then to realize what I'm doing? - Uriel.Kilback commented on August 19th 19 at 22:57
: What are not satisfied inputy left? After all, there are all necessary fields. - Wilfrid82 commented on August 19th 19 at 23:00
: For better usability. It would be necessary to hide fields that are not required to fill. I, for example, if you select courier service delivery you need to hide field City and zip code, as they are not required in this case and do not mislead the user. - Uriel.Kilback commented on August 19th 19 at 23:03
: written response - Wilfrid82 commented on August 19th 19 at 23:06
August 19th 19 at 22:56
You can listen to the completed event of the ajax request and hang handlers on the radio buttons:
$( document ).ajaxComplete(function(event, xhr, settings) {
 $(".shipping_method").change(function() {
 if($(this).val() === 'flat_rate:15') {
 $('#city #index').show();
}
});
});

PS: Ajax requests can be filtered, if a lot of them and do not want to override the handlers for each of them. To filter study variables xhr and settings that are transferred to callback ajaxComplete.

Find more questions by tags AJAXJavaScriptjQueryWooCommerce