javascript - jquery methods are not firing with css class names after moving to js file? -

below methods working fine when have them in razor or partial views. after them js these not @ all. js file loading , other regular javascript methods working fine. wrong?

    $('.phonelocation').on('change', function () {     $("#hdncommunicationlocation").val(this.value); // or $(this).val() }); $('.phonetype').on('change', function () {     $("#hdncommunicationtype").val(this.value); // or $(this).val()  $('.phonecountry').trigger('change'); }); $('.phonecountry').change(function () { .. } 

you must add js after document loaded.

$(document).ready(function () {     $(document).on('change', '.phonelocation', function () {         $("#hdncommunicationlocation").val(this.value); // or $(this).val()     });     $(document).on('change', '.phonetype', function () {         $("#hdncommunicationtype").val(this.value); // or $(this).val()         $('.phonecountry').trigger('change');     });     $(document).on('change', '.phonecountry', function () {         ..     } }); 

update: try adding events document way no matter when elwments added events still work