当点击编辑按钮时,将数据传递给弹出的模态框。
如果当前的按钮是在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">×</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); }
转载于:https://blog.51cto.com/11144189/1749636