当点击编辑按钮时,将数据传递给弹出的模态框。

如果当前的按钮是在jsp中使用<c:foreach>标签遍历循环出来的,则在触发Bootstrap对模态框内置的4个方法时,将获取不到对象。

<button aria-hidden="true" data-toggle="modal"
class="icon-pencil" data-target="#showinfo"
data-photoid="${photo.photoid }"
data-path="${photo.photoname}"
data-remake="${photo.photoremake }" 
></button>

<div class="modal fade" id="showinfo" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel" style="width: 600px;">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">
							图片编号:<span id="photoid"></span>
						</h4>
						<input type="hidden" id="photoidhidd">
					</div>
					<div class="modal-body">
						<div class="form-group">
							<img alt="" src="" id="imgs" width="500px" height="300px">
						</div>
						<div class="form-group">
							<label>图片描述</label>
							<textarea style="width: 500px;" id="photoremake"></textarea>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">Close</button>
							<button type="button" id="updateremake" class="btn btn-primary">Submit</button>
						</div>
					</div>

				</div>
			</div>
		</div>
			 $('#showinfo').on('show.bs.modal', function(event) {
				
				var button=$(event.relatedTarget);
				var photoid = button.data("photoid");
				var url = button.data("path");
				var remake = button.data("remake");
				$("#photoid").html(photoid);
				$("#imgs").attr("src","/shoots/"+url);
				$("#photoremake").html(remake);

			})

当点击按钮时,会首先触发show.bs.modal事件,本意是通过event.relatedTarget获取到触发事件的按钮对象,然后通过获取对象的dataset的值,将值传递给模态框;但是因为按钮是动态生成的所以取不到对象,通过一番研究最后没有使用show.bs.modal事件,而是给button添加了一个onclick事件,执行如下方法:

function iii(event) {
event = event ? event : window.event;
var button = event.srcElement ? event.srcElement : event.target;
var photoid = button.dataset.photoid;
var url = button.dataset.path;
var remake = button.dataset.remake;
$("#photoid").html(photoid);
$("#photoidhidd").val(photoid);
$("#imgs").attr("src", "/shoots/" + url);
$("#photoremake").val("");
$("#photoremake").val(remake);
}