Bootstrap modal调用controller方法打开其他文件夹的页面，以及一些remote加载一次和监听多次的问题

本文链接：https://blog.csdn.net/sinat_36707441/article/details/90644640

首页：

<!--添加按钮-->
<button id="test_add" >添加</button>

<!--信息保存窗口-->
<div id="win-save" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
		</div>
	</div>
</div>

页面按钮的事件绑定：

$("#test_add").click(function () {
    $("#win_save").modal({
        remote: "/test/add",	//可以填写一个controller层或页面的url，会调用jquery load方法加载数据
        backdrop:" static",	//指定一个静态背景，当用户点击背景处，modal界面不会消失
        keyboard: true	//当按下esc键时，modal框消失
    }).on("loaded.bs.modal", function () {
        _winSelectServicer();//自定义的方法，与这里无关
        $("#win-save-title").text("新增");
    }).on("shown.bs.modal", function () {
        _initSaveForm();//自定义的保存事件，与这里无关
        $(this).off('shown.bs.modal');//解决监听多次的bug
    }).on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");//解决remote加载只会发生一次的bug--Bootstrap v3版本
        $(this).find(".modal-content").children().remove();//消失后移除引入的html
    });
    // $("#test_save").on("hidden", function() {
    // 	$(this).removeData("modal");//解决remote加载只会发生一次的bug--Bootstrap v2版本
    // });
});

controller的【/test/add】方法：

@RequestMapping(value="/test/add", method = RequestMethod.GET)
    public ModelAndView Add(){
        ModelAndView modelAndView = new ModelAndView("windows/win-test-save");
        return modelAndView;
    }

ModelAndView返回的windows文件夹下的win-test-save.html页面：

<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<h4 class="modal-title" id="win-save-title"></h4>
</div>
<form id="win-queryForm" name="win-queryForm" class="form-horizontal" method="post">
	<div class="modal-body">
		<div class="row form-group">
			<label for="name" class="col-sm-2 control-label">名称</label>
			<div class="col-sm-4">
				<input type="text" name="name" class="form-control" id="name"/>
			</div>

			<label for="short_name" class="col-sm-2 control-label">简称</label>
			<div class="col-sm-4">
				<input type="text" name="short_name" class="form-control" id="short_name"/>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" id="win-btn-close" class="btn btn-default" data-dismiss="modal">关闭</button>
		<button type="button" id="win-btn-save" class="btn btn-primary">保存</button>
	</div>
</form>

对于model监听多次的问题，网上有些人说可以用这种方式解决：

var count = 0;
$("#myModal").on("loaded.bs.modal",function{
    if(++count == 1){
        //调用你需要的方法
    }
    //在模态框加载的同时做一些动作
});

对于这种方法，我的测试结果：如果if里面放的是保存事件(像上面的_initSaveForm())时，第一次打开model可以执行，但打开多次后就不能执行。（可能测试不对）