Javascript jquery方法在移动到js文件后没有使用css类名触发？

当我在剃须刀或局部视图中使用以下方法时，它们工作正常。从它们到JS之后，这些都不是。JS文件正在加载，其他常规javascript方法工作正常。怎么了

    $('.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 () {
..
}

---

加载文档后，必须添加js

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

---

更新：尝试以这种方式将事件添加到文档中，无论何时添加elwments，事件仍将有效

这些js是否添加到document.ready方法中？如果不使用razor，您将使用什么来编译js文件？尝试将其绑定到文档$（document）。on（'change'，'.phonelocation'，function（）{…为什么$（文档）.on（'change'、'.phonetype'，正在工作？有什么区别？没有被标记您已经发表了评论，所以刚刚看到了这一点。Nayish下面的解释是正确的。页面加载中不存在元素，因此将事件绑定到文档并为元素添加选择器将解决问题。my knowledge js文件可能有多个

$（document）.ready（function（）

正确吗？它不工作！那些类名没有在css文件中定义，而是在我定义的控件上定义的。为什么

$（document）.on（'change'，'.phonetype'，

工作？有什么区别吗？事件被添加到文档中，而不是我猜在加载文档时不存在的元素