使用jbox时，绑定值到弹窗表单指定id失败；点击按钮实现jbox表单弹窗

事情是这样的，我写了个按钮，点击按钮就会出现弹窗，弹窗我是用jbox实现的，弹窗内容是个表单。

在这个表单出现的时候，我会调用别人的接口，把接口返回的数据绑定到表单相关的id上，然后显示出来。

但是我试了很多次，发现我虽然使用了document.getElementById("id").value = xxx，但是值一直没绑定成功。后面按F12调试看了elements变化，才知道是jbox弹窗表单的时候，它会自己复制一份表单出来，然后在弹窗的表单内容使用，我绑定的值只是绑定到原来的表单里去，并没有绑定到弹窗复制的表单，所以我就在弹窗内用$.jBox.getBox()来获取当前弹窗，再把接口返回的值存在全局变量，然后把这个变量值赋值给弹窗表单指定id。

var box = $.jBox.getBox();
box.find("#jboxText").val(testjbox);

粗略代码如下：（并不能保证一定成功，这个是按照我的理解写出来的，大家使用的时候取自己需要的部分）

按钮：

<li class="btns"><input id="showJboxDialog" class="btn btn-primary" type="button" value="jbox示例" /></li>

弹窗：

<%--测试jbox--%>
	<div id="dialogJbox"  class="hide">
		<form class="layui-form" action="">
			<div class="layui-panel">
				<div class="layui-form-item">
					<label class="layui-form-label">问题</label>
					<div class="layui-input-block">
						<input type="text" name="jboxText" lay-verify="required"
							   id="jboxText"
							   lay-reqtext="必填项岂能为空？"
							   placeholder="请输入内容" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="btn btn-primary" lay-submit="" lay-filter="jbox">
							提交
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>

弹窗的处理：

<script type="text/javascript">
    //定义全局变量存放接口返回的值
	var testjbox;
	$(document).ready(function() {
        //弹出弹窗
        $("#showJboxDialog").click(function(){
	        $.jBox($("#dialogJbox").html(), {title:"测试jbox咯", buttons:{"确定":true}})
	        if(testjbox){
		        var box = $.jBox.getBox();
		        box.find("#jboxText").val(testjbox);
	        }
        });
    }
//表单处理
layui.use(['jquery', 'form', 'layedit', 'laydate'], function () {
			var form = layui.form
					, layer = layui.layer;
			var $ = layui.$ //

			//测试jobx表单提交处
			form.on('submit(jbox)', function (data) {
				//调用别人的接口路径
				var url = xxx;
				$.ajax({
					url: url,
					type: "get",
					success: function (data) {
						//成功后做点什么
						testjbox=data.xxx;

                        //原来的处理方法，但是失败了
						// document.getElementById("jboxText").value = data.xxx;
					},
					error: function (data) {
						//失败后做点什么
					}
				});
				return false;
			});
}

 

这个例子我并没测试绑定成功与否，但大致原理就是这样的了，如果有什么不足，欢迎指出。对，我就是个菜鸟，前端不会啥的，可能代码比较混乱。