js自定义方法直接申明式的使用以及在jquery的$(function(){})中使用的区别

有一个A页面，作为公共的初始条件

开始时间 :<input type="text" id="starttime" class="ch_time" InitData="getYestoday" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" IsRedundance="true"></input>结束时间 :<input type="text" id="endttime" class="ch_time" InitData="getYestoday" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" IsRedundance="true"></input>zq：<select id="warId"></select>cs:<select id="cityId"></select>fgs:<select id="cp_channel" name="cp_channel">   </select>

然后在B页面引入A页面，但是其中的查询条件需要添加一个，所以就想通过jquery的after方法添加，然后直接在js中申明调用，然后却出现了问题

initSelect();function initSelect() {var html = "yw:<select id=\"source\"></select>";$("#cp_channel").after(html);}

然后在B页面的js中加入这样的一段代码,问题得到解决

方式二：$(function() { //初始化查询框 initSelect();});

原因分析：
分别在这两种情况下在控制台打印

function initSelect() {var html = "yw:<select id=\"source\"></select>";$("#cp_channel").after(html);console.log($("#cp_channel"));}

得到结果如下：
方式一得到的结果

方式二得到的结果

方式一没有取得对象，方式二取得了对象，所以可以知道方式一的执行是在js一加载就会执行，而第二种是在页面加载了才会执行