1.Question :关于追加html页面,生成的上传文件按钮和选择图片按钮不能使用的问题?
原因:追加的html事件无法触发导致的
解决办法:
在js 文件里面修改方法:
add: function () { require(['upload'], function(Upload){ Upload.api.plupload(); }); $(document).on("fa.event.appendfieldlist", "#add-form .btn-append", function (e, obj) { Form.events.plupload(obj); Form.events.faselect(obj); }); Controller.api.bindevent();},edit: function () { require(['upload'], function(Upload){ Upload.api.plupload(); }); $(document).on("fa.event.appendfieldlist", "#add-form .btn-append", function (e, obj) { Form.events.selectpage(obj); Form.events.plupload(obj); Form.events.faselect(obj); }); Controller.api.bindevent();},
视图代码:主要是设置页面样式:
<div class="form-group col-sm-12"> <label class="control-label col-sm-1">课程:</label> <div class="col-xs-12 col-sm-12 col-md-12" > <dl class="fieldlist col-sm-12 col-md-12" data-template="eventtpl" data-name="row[event]"> <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd> <!--请注意 dd和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏--> <textarea name="row[event]" class="form-control" cols="30" rows="5" style="display: none"></textarea> </dl> <script id="eventtpl" type="text/html" > <div class="col-xs-12 col-sm-12 col-md-12"></div> <dd class="form-inline col-xs-8 col-sm-8 col-md-8" style="border:1px solid #d7d7d7;margin-bottom:10px;height:auto;background-color: #f6f6f6;border-radius:45px;width: 60%;float:left;padding: 30px;" > <input style="width: 220px;" data-rule="" class="form-control col-xs-6 col-sm-6 col-md-6" name="<%=name%>[<%=index%>][coursename]" type="text" placeholder="课程名称"/> <div class="input-group col-xs-6 col-sm-6 col-md-6"> <input style="width: auto"id="c-coursefile<%=index%>" class="form-control" size="50" name="<%=name%>[<%=index%>][coursefile]" type="text" placeholder="课程文件"> <div class="input-group-addon no-border no-padding"> <span><button type="button" id="faupload-coursefile<%=index%>" class="btn btn-danger faupload" data-input-id="c-coursefile<%=index%>" data-multiple="false" data-chunking="true" data-maxsize="10M" data-preview-id="p-coursefile<%=index%>"><i class="fa fa-upload"></i> {:__('Upload')}</button></span> <span><button type="button" id="fachoose-coursefile<%=index%>" class="btn btn-primary fachoose" data-input-id="c-coursefile<%=index%>" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span> </div> <span class="msg-box n-right" for="c-coursefile<%=index%>"></span> </div> <ul class="row list-inline faupload-preview" style="width:auto;margin-left: 245px;" id="p-coursefile<%=index%>"></ul><!----> <div class="col-sm-12"> <!--下面的两个按钮务必保留--> <span class="btn btn-sm btn-danger btn-remove col-sm-offset-10"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort "><i class="fa fa-arrows"></i></span></div> <input style="width: 220px;" class="form-control" name="<%=name%>[<%=index%>][commenttitle]" type="text" placeholder="点评标题"> <div class="input-group col-xs-6 col-sm-6 col-md-6"> <input style="width: auto" id="c-commentfile<%=index%>" class="form-control" size="50" name="<%=name%>[<%=index%>][commentfile]" type="text" placeholder="点评文件" /> <div class="input-group-addon no-border no-padding"> <span><button type="button" id="faupload-commentfile<%=index%>" class="btn btn-danger faupload" data-input-id="c-commentfile<%=index%>" data-multiple="false" data-preview-id="p-commentfile<%=index%>"><i class="fa fa-upload"></i> {:__('Upload')}</button></span> <span><button type="button" id="fachoose-commentfile<%=index%>" class="btn btn-primary fachoose" data-input-id="c-commentfile<%=index%>" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span> </div> <span class="msg-box n-right" for="c-commentfile<%=index%>"></span> </div> <ul class="row list-inline faupload-preview" style="width:auto;margin-left: 245px;" id="p-commentfile<%=index%>"></ul><!----> </dd> </script> </div> </div>
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。