jquery异步调用自数据库获取值通过knockoutjs赋值给职位二级菜单导致的jquery的hover事件不执行的例子

来源：互联网发布：淘宝的企业店铺申请编辑：程序博客网时间：2024/05/16 07:28

页面中的相应代码：

<div class="goods">                    <div class="head">                        <h3>                            <i class="fa fa-bars pull-left margin-left-20"></i>                            <i class="fa fa-chevron-down pull-right margin-right-20"><span></span></i>全部职位分类                        </h3>                    </div>                    <div class="all-goods">                        <!-- ko foreach: $data.JobClass -->                        <div class="item " data-bind="css:{'btnone':$index==0}">                            <div class=" product">                                <i class="fa fa-chevron-right pull-right margin-top-10 margin-right-20 font-xs" style="color:#c1c1c1"></i>                                <h3> <a href="#" data-bind="text:$data.JobClassName">...</a> </h3>                            </div>                            <div class="product-wrap posone">                                <!-- ko foreach: SubClass -->                                <div class="cf">                                    <div class="fl   pr20">                                        <h2><a href="#" target="_blank" data-bind="text:$data.JobClassName">...</a></h2>                                        <dl class="cf">                                            <!-- ko foreach: Jobs -->                                            <dd> <a href="" target="_blank" data-bind="text:$data.JobClassName,attr:{'href':'/so/1/'+JobClassCode()}" style="font-weight:normal;">...</a> </dd>                                            <!-- /ko -->                                        </dl>                                    </div>                                </div>                                <!-- /ko -->                            </div>                        </div>                        <!-- /ko -->                    </div>                </div>

jquery调用：
$.post("/service/getjobclass", {}, function (data) {       jobClassX = data;       console.info(jobClassX);       page.VM.JobClass=ko.mapping.fromJS(jobClassX, {}, page.VM.JobClass);   });

导致的显示效果本来是这样：

鼠标放在左边链接上能显示右边的菜单，但是，现在却显示不出了。
查了下控制hover显示的代码：
//商品分类   
$('.all-goods .item').hover(function () {
       console.info($(this).addClass('active').find('s'));       $(this).addClass('active').find('s').hide();       $(this).find('.product-wrap').show();   }, function () {       console.info($(this).removeClass('active').find('s'));       $(this).removeClass('active').find('s').show();       $(this).find('.product-wrap').hide();   });

增加console.info输出，在浏览器控制台没有任何提示，说明hover事件根本没有执行。刚开始以为是异步调用二级和三级职位分类没加载上，审查元素，
看到自数据库中获取的数据在页面中均正确加载了。经过各种尝试均没有解决。后来怀疑是异步调用的问题。改为同步调用。代码如下：
$.ajax({        url: "/service/getjobclass",        type:"POST",        data:{},         async:false,        success: function (data) {            jobClassX = data;            console.info(jobClassX);            page.VM.JobClass = ko.mapping.fromJS(jobClassX, {}, page.VM.JobClass);        }    });
这才可以正确显示.推测是hover事件绑定函数的时候，异步调用还没有加载完全造成

0 0