welcome to xlongwei.com

欢迎大家一起学习、交流、分享


QQ:9167702333 邮箱:admin@xlongwei.com

jquery.live动态绑定事件已改为on方法


分类 Java   关键字 分享   标签 java   web   jquery   发布 hongwei  1445610952636
注意 转载须保留原文链接,译文链接,作者译者等信息。  
jquery.live可以给动态增加的html元素绑定事件,使用起来非常方便,但版本1.9之后live方法已被废弃,改用on方法实现对应功能。demo地址:http://cms.xlongwei.com/demo/galleria.html

galleria是jquery的一个相册插件,以下是图片相关代码,这个div会被galleria隐藏,所以无法在img上添加事件
<div class="galleria">
	#foreach($img in $!galleria)
		<img src="$uploads$img">
	#end	
</div>

动态添加事件,galleria会生成<div class="galleria-images">的元素,$(document).on("click",'selector',function)对应于jquery('selector').live("click",function),给翻动的照片动态添加click事件,鼠标点击会跳转到财富箱平台。
$(document).on("click",'.galleria-images>.galleria-image',function(){location.href="http://www.caifuxiang.com/statics/redirect.html?by1067"})

相册上面是下拉选择框,value路径值是相对于http://s.xlongwei.com/uploads/的路径,只是服务器上的一个图片目录而已(image/beiying目录是从ppt导出来的幻灯片哦,60几兆的ppt导出jpg后只有不到4兆图片)。
<select class="form-control" name="galleria">
	<option value="image/beiying">beiying</option>
	<option value="image/beiying2">beiying2</option>
	<option value="img/2015">2015</option>
	<option value="img/avatar">avatars</option>
</select>

java后台收集目录内的图片文件,将相对路径传到vm页面
File dir = new File(GlobalConfig.getProperty("uploads_file")+galleria);
if(dir.exists() && dir.isDirectory()) {
File[] imgs = dir.listFiles(FileUtil.ExtFileFilter.images);
model.addAttribute("galleria", CollectionUtils.collect(Arrays.asList(imgs), new Transformer() {
private int length = GlobalConfig.getProperty("uploads_file").length();
public Object transform(Object input) {
return ((File)input).getAbsolutePath().substring(length); //File数组=>List=>Transform=>String相对路径
}
}));