首页
网站首页
公司简介
资讯中心
推荐内容
返回顶部
submit无法提交问题_jquery_脚本之家,Tmpl不详细讲解_jquery_脚本之家
发布时间:2019-12-28 20:41
浏览次数:

Bug现场:

复制代码 代码如下: $.click { $; 上述代码点击注册开关时束手坐视提交表单 原因 Additional Notes: Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint. 其它注意事项: 表单和其子成分不宜用二个表单的性格的特性作为name或id的称谓,如submit, length, or method,是、会生出冲突。名称冲突大概会促成混乱的失利。对于二个安然无恙的平整列表,并检讨那个难点标识,看DOMLint。 所以将登记开关的id改为“register”就OK了

在Ajax横道的今天,大家在页面交互作用上有了更加高的渴求,动态生成HTML无可置疑是中间的生龙活虎种。动态生成HTML的方式多样种种,其主导不外乎在前段将数据组装成我们想要的沙盘,最后通过自然的法子输出给客商(innerHTML、documentWrite等格局)。 缺点 1)拼接字符串的历程轻松失误,平日忘了'/”>等十分的标记。 2)校正前台模版的同临时候容易遗忘同步转移动态变化的模板。 3)拼接字符串不直观和美丽,不方便人民群众查找错误,比方:数据中意气风发经存在HTML内容,会产生各样麻烦。 4)不可能满足较高的政工逻辑需要,管理决断较为麻烦,譬如:当A处境生成X模版,B景况生成Y模版。 5)复用性低,较为相仿的模板难以公用。 需求 1)轻便,直观的沙盘2)易于维护模版的可复用性 4)管理料定的逻辑判定 解决方案 基于上述的毛病,jQuery Tmpl这么些插件能够很好的满意了笔者们的须求。使用这种新式的模板技艺仅仅需求引进jQuery Tmpl那一个插件而已。该插件拾贰分精制,对于品质的震慑并相当的小。何况据闻那一个插件是Microsoft开垦的,对于ASP.NET MVC的友好度是大大的。 点击这里进入项目地址

首先大家看上面包车型大巴贰个很广阔的事件绑定代码: 复制代码 代码如下: //example $.click{ //do something }卡塔尔国; $.click{ //do something }卡塔尔(قطر‎; 这段代码在事变绑定管理上有一点点瑕玷: 过多的事件绑定会费用内存前期生成HTML会未有事件绑定,需求重新绑定 语法过于繁缛 削株掘根方案 对于1、2两点的施工方案,咱们率先先精通一下jQuery的风云绑定 jQuery的平地风波绑定有多个格局能够调用,以click事件来比喻: click方法 bind方法 delegate方法 on方法 不管你用的是(click / bind / delegate卡塔尔国之中国和南美洲常格局,最后都以jQuery底层都以调用on方法来落成最终的事件绑定。由此从某种角度来说除了在书写的福利程度及习贯上选择,比不上直接都利用on方法来的忘情和向来。 关于对章程的详实分解和用例,请直接访谈jQuery官方网址,在这里间一点都不大器晚成一表达。api.jquery.com 性能 首先大家须求先对区别的轩然大波绑定格局之间的内部存款和储蓄器占用差别有八个清楚的认知。 对于质量的分析将接受Chrome的Developer Tools。 Profiles --> Take Heap Snapshot,用那个工具我们得以看到Javascript所据有的内部存款和储蓄器,可以对质量难题开展分析。

透过开辟职工作者具查看,下拉列表框是有Options的,但您点击采纳的时候却什么也不出示。 复发步骤: 该难点发出在级联下拉框的情景,第二个列表退换,第叁个列表的值跟着变动! 本例中使用以下方法绑定数据: 复制代码 代码如下: //绑定下拉框 //ctnSelector:下拉框ID,带#号, //jsonData:JSON数据, //txtField:文本字段名称, //val菲尔德:值字段名称, //strOptions:私下认可填加的项 function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions卡塔尔 { if .length == 0State of Qatar { return false; }; $; var optList = strOptions; if != undefinedState of Qatar { for (var jitem in jsonDataState of Qatar { if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo"卡塔尔 { continue; //解决flareJ.Base.js引致的难题。 } optList += "" + jsonData[jitem][txtField] + ""; } } $.html; } 平常加载时不会现身任何难题! 但当因第三个下拉框的值退换,而第三个下拉框的选项都被清空了, 然后您照旧去点第3个下拉框试图去筛选大器晚成项后, 再去更换第4个下拉框的选项, 你会发现以前第叁个下拉框中显得的与第一个下拉框对应的项却怎么也展现不出来了, 只好显示第三个,或是通过脚本设置为当选的二个! 消除方案: 使用DOM的点子去操作Options,代码如下: 复制代码 代码如下: //绑定下拉框 //ctnSelector:下拉框ID,带#号, //jsonData:JSON数据, //txt菲尔德:文本字段名称, //valField:值字段名称, //strOptions:暗中同意填加的项 function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions卡塔尔 { if .length == 0卡塔尔 { return false; }; $; var sel = $; var newOpt = $; var newOption1 = document.createElement; newOption1.text = newOpt.text(卡塔尔; newOption1.value = newOpt.val(卡塔尔国; sel.options.add; if != undefined卡塔尔(قطر‎ { for (var jitem in jsonData卡塔尔 { if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo"卡塔尔国 { continue; //消灭flareJ.Base.js以致的主题材料。 } var newOption = document.createElement; newOption.text = jsonData[jitem][txtField]; newOption.value = jsonData[jitem][valField]; sel.options.add; } } }

通过图形我们可以很直观的看见Tmpl的办事原理,大家唯有供给提供数据和模版。数据我们能够因而后台的Json方法直接传到前台,而模版则是接下去要讲的事物了。

DEMO HTML 复制代码 代码如下:

1)模版代码写在哪个地方?复制代码 代码如下:

Create Element

我们得以看见实际模版代码的器皿便是大家的

Method 1 复制代码 代码如下: ${ $.click{ alert; }卡塔尔; 以下是Method 1的内部存款和储蓄器深入分析图 内部存款和储蓄器占用约3.4M

Method 2 复制代码 代码如下: $.on('click', 'a', function{ alert; }卡塔尔; 以下是Method 2的内部存款和储蓄器分析图 内部存款和储蓄器占用约2.0M

友情链接: 网站地图
Copyright © 2015-2019 http://www.nflfreepicks.net. 新葡萄京娱乐场网址有限公司 版权所有