[JQUERY-AJAX-JST] 动态渲染的页面事件无法绑定问题的解决方案_数据库动态渲染的侧边导航,为啥绑定id点击报错呢-优快云博客

本文链接：https://blog.youkuaiyun.com/quzishen/article/details/5840920

在使用JST动态渲染的页面上，由于DOM元素是在页面加载后生成的，导致在jQuery的$(document).ready()中绑定的事件无法生效。问题在于ready事件在动态内容渲染之前已完成。解决方案是在内容渲染完成后，手动调用事件绑定函数，例如在本例中，通过processUploadBox()函数在渲染后绑定表单提交事件，从而确保事件能够正确绑定并触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个页面是使用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" οnclick="canclePic()">撤销</button>上传商品照片（最多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" οnclick="canclePic()">撤销</button>

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

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

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

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

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

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

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