学步园

一个页面是使用JST动态进行渲染的，其中有一段代码是用于图片上传，如下：

上传商品照片（最多5张）
                <form id="form1" name="form1" lang="zh-cn" action="upload" method="POST" enctype="multipart/form-data">
                    <input type="file" size="38" id="upload1" name="upload1">
                    <button type="submit">上传</button>
                </form>
                <img id="uppic1" name="uppic1" src=""/>
                <button id="upbtn1" name="upbtn1" onclick="canclePic()">撤销</button>上传商品照片（最多5张）<br /> <form id="form1" name="form1" lang="zh-cn" action="upload" method="POST" enctype="multipart/form-data"><br /> <input type="file" size="38" id="upload1" name="upload1"><br /> <button type="submit">上传</button><br /> </form><br /> <img id="uppic1" name="uppic1" src=""/><br /> <button id="upbtn1" name="upbtn1" onclick="canclePic()">撤销</button>

我们采用JQUERY异步提交的方式，为了不刷新页面而上传图片，所以我们使用如下的代码来绑定一个异步请求事件：

// 图片上传<br /> $j("#form1").submit(function(){<br /> if(null == $j("#upload1").val() || "" == $j("#upload1").val()){<br /> alert("请选择照片！");<br /> return false;<br /> }</p> <p> var option = {<br /> url : "./goods.do",<br /> type:"POST",<br /> success : function(result){<br /> $j("#uppic1").attr("src",result);<br /> $j("#upbtn1").css("display","");<br /> }<br /> };<br /> $j(this).ajaxSubmit(option);<br /> return false;<br /> });

我们把上述代码放在了$j(document).ready()中。

但是发生的问题是，页面渲染完了点击提交按钮，根本不会有绑定事件的发生，这是为什么？

是因为这张页面我们采用的是动态渲染的方式，在页面一打开，这个ready中的操作已经执行完成，而后续我们再渲染这张页面，则已经在事件绑定操作之后了，由于我们的JST模板是存放在一个textarea中的，所以在执行渲染之前，是无法获取表单并绑定的。这就是动态渲染的页面事件无法绑定的根本原因。

解决方案也很简单，错可时间差，就是渲染完了之后再执行绑定：

$("ColorSelect").innerHTML = TrimPath.parseTemplate($("ColorSelectTA").value).process(param);<br /> // 这里手动触发JQUERY进行绑定事件，必须是木板渲染完了之后才能绑定，如果直接在ready方法中绑定，则模板尚未渲染，不能成功绑定<br /> processUploadBox();

var $j = jQuery.noConflict();<br /> function processUploadBox(){<br /> // 图片上传<br /> $j("#form1").submit(function(){<br /> if(null == $j("#upload1").val() || "" == $j("#upload1").val()){<br /> alert("请选择照片！");<br /> return false;<br /> }</p> <p> var option = {<br /> url : "./goods.do",<br /> type:"POST",<br /> success : function(result){<br /> $j("#uppic1").attr("src",result);<br /> $j("#upbtn1").css("display","");<br /> }<br /> };<br /> $j(this).ajaxSubmit(option);<br /> return false;<br /> });<br /> }