大佬教程收集整理的这篇文章主要介绍了动态字段上的jQuery x-editable插件?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经使用静态元素进行了这项工作,但是使用动态元素我有很大的问题.
首先,与所有html结构一起,生成所有动态元素的类,其动态字段的类名号.我正在使用配置的Fieldcount执行此操作:var FieldCount = 1;然后在生成HTML代码的部分内容中添加类似class =“privacy-dynamic’FieldCount’”的内容.然后第一个动态元素在HTML代码中获取名为privacy-dynamic2的类,第二个获取privacy-dynamic3,依此类推.
现在,我的第一个结论是我需要以某种方式为x-editable添加一个类似的选项,其中我将创建一个具有相同FieldCount的脚本,因此每个x-editable弹出窗口将对应于其左边的“结果输入”而不是一个弹出窗口所有动态输入.
我尝试以与生成html结构相同的方式生成x-editable脚本,但它没有用.傻傻的尝试,我知道,用脚本生成脚本,但我很绝望.
我真的不知道它是如何解决的,我是一个jquery菜鸟,我迷失了它.它能以某种方式解决吗?
下面是当前情况,其中第一个静态字段具有x-editable working,而动态字段具有相同的x-editable结构但没有脚本:http://jsfiddle.net/dzorz/QxMs7/
HTML:
<div class="container"> <input type="text" class="main_activity" id="main_activity" name="main_activity" placeholder="Main activity"> <div class="parentToDelegate"> <a href="#" id="privacy" class="privacy" data-type="SELEct" data-pk="1" data-value="1" data-original-@R_673_10283@e="SELEct visibility">public</a> <input type="text" id="privacy_result" class="privacy_result" value="1"/> </div> <div class="row"> <div id="InputsWrapper"> </div> </div> <div class="row"> <span id="AddMoreBox" class="btn btn-info pull-right"><i class="icon-plus"></i>Add More</span> </div>
脚本:
//x-editable $('.privacy').editable({ showbuttons: false,unsavedclass: null,type: 'SELEct',inputclass: 'input-medium privacy-SELEct',source: [ {value: 1,text: 'public'},{value: 2,text: 'approved contacts only'},{value: 3,text: 'matching contacts'},{value: 4,text: 'invisible'} ],}); $(function(){ $('.parentToDelegate').on('change keyup blur',".privacy-SELEct",function(){ $('.privacy_result').val($('.privacy-SELEct').val()); }).blur(); }); //dynamic fields $(document).ready(function() { var MaxInputs = 5; //maximum input Boxes allowed var InputsWrapper = $("#InputsWrapper"); //Input Boxes wrapper ID var AddButton = $("#AddMoreBox"); //Add button ID var x = InputsWrapper.length; //initlal text Box count var FieldCount=1; //to keep track of text Box added $(AddButton).click(function (E) //on add input button click { // if(x <= MaxInputs) //max input Box allowed // { FieldCount++; //text Box added increment //add input Box $(InputsWrapper).append('\ <div>\ <input type="text" class="other_activity"\ name="other_activity" id="other_activity"\ placeholder="Other activity" style="margin:0px 15px 10px 0px"/>\ <a href="#" class="removeclass"><i class="icon-remove icon-remove-add"></i></a>\ <div class="parentToDelegate-dynamic'+ FieldCount +' parent-dynamic">\ <a href="#" id="privacy-dynamic" class="privacy-dynamic'+ FieldCount +'" data-type="SELEct" data-pk="1" data-value="1" data-original-@R_673_10283@e="SELEct visibility">public</a>\ <input type="text" id="privacy-result-dynamic'+ FieldCount +'" name="privacy-result-dynamic'+ FieldCount +'" class="privacy-result-dynamic'+ FieldCount +' privacy_dynamic" value="1"/>\ </div>\ </div>'); x++; //text Box increment // } return false; }); $("body").on("click",".removeclass",function(E){ //user click on remove text if( x > 1 ) { $(this).parent('div').remove(); //remove text Box x--; //decrement textBox } $('.income_count').trigger('change'); return false; }); });
CSS:
.container{ padding-top:100px } .privacy_result,.privacy_dynamic{ width: 40px; } .main_activity,.other_activity{ width: 140px; } .parentToDelegate{ display:inline; } .icon-remove-add{ margin-left: -10px; margin-top: -8px; } .parent-dynamic{ display: inline; top: -5px; left: 10px; position: relative; }
欢迎任何帮助或建议,您可以自由编辑我的jsfiddle并将其发回
以上是大佬教程为你收集整理的动态字段上的jQuery x-editable插件?全部内容,希望文章能够帮你解决动态字段上的jQuery x-editable插件?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。