jquery异步调用自数据库获取值通过knockoutjs赋值给职位二级菜单导致的jquery的hover事件不执行的例子
2016-12-23 20:38
701 查看
页面中的相应代码:
<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事件绑定函数的时候,异步调用还没有加载完全造成
<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事件绑定函数的时候,异步调用还没有加载完全造成
相关文章推荐
- Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
- 从ajax获取的数据无法通过Jquery选择器来调用事件
- 通过java调用VBS,再用VBS执行Excel中的宏的例子
- JS闭包实现给DIV添加事件 显示二级菜单例子
- jQuery hover 事件制作jquery菜单
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- 通过获取菜单的Rect来映射相关的菜单事件
- jquery Flexigrid只选择一行,增加双击事件,获取数据库ID
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- android按钮拖动Button 在up事件中做弹出菜单调用(通过判断坐标解决事件冲突问题)
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- 获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
- 通过java调用VBS,再用VBS执行Excel中的宏的例子
- jquery easyui树形菜单调用点击事件例子
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- 通过例子学习Jquery---导航栏 菜单
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- dtree.js树的例子--从数据库获取菜单(最下面附dtree.js用法说明)
- 【转载】一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- table动态添加的tr 其click事件在IE兼容模式中不执行 jquery 1.9 的live事件 和获取 first last