Ajax.Updater 动态填充元素后载入内容中的 script.aculo.us 脚本执行问题

本文介绍了一种解决Ajax动态加载页面中JavaScript脚本不执行的问题,通过使用onclick事件和特定的事件清除方法,确保了脚本仅执行一次。

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

最近在做个相册,把它做成全 Ajax  型似乎不错,反正该死的搜索引擎也不可能来搜索我的图片资源。但在制作过程中遇到了一个问题。

<span id="post_<%# DataBinder.Eval(Container.DataItem, "id")%>">
<span class="albumManage">
        
<span class="albumManageEdit"><id="edit_<%# DataBinder.Eval(Container.DataItem, "id")%>" href="#">编辑</a></span>
        
<script type="text/javascript">
                
var editID = '<%# DataBinder.Eval(Container.DataItem, "id")%>';
                
new Ajax.InPlaceEditor(editID, $('post_' + editID), '../ManagementCenter/PhotoCenter/SaveAlbumName.aspx', {
                        externalControl: 
'edit_' + editID,
                        ajaxOptions: {method: 
'post'}
                });
        
</script>
</span>
用 Ajax.Updater 动态载入的页面中有需要立刻执行的 script.aculo.us 效果,但是填充的内容有 javascript 脚本是不会被执行的,我还没有去分析,不过它应该也是用 innerHTML 来填充元素。网络上动态载入脚本的方法都不适合这种 HTML 与 Javascript 混合字符串的处理。

于是我编写了一个函数:

Updater : function(objID) {
    
new Ajax.InPlaceEditor(objID, $('post_' + objID), '../ManagementCenter/PhotoCenter/SaveAlbumName.aspx', {
        externalControl: 
'edit_' + objID,
        ajaxOptions: { method: 
'post' }
    });
}

我试着用通俗的语言描述一遍,以便初学者也能看懂:

简单来说就是在 A页 用 XmlHttp 这个内置对象异步读取 B页 的内容,读取完成后把得到的内容用 innerHTML 方法填充到 A页 中的某个元素,比如一个 div 中,但是 B页 返回的内容中包含有需要立刻执行的 Javascript 脚本。

填充的脚本是不会立刻执行的,所以我用了 onclick 事件,以便在使用时激活它。问题出现了,我实现了让它执行脚本,但是 new Ajax.InPlaceEditor 显然生成了一些 onclick 事件的内容,导致每次点它都多产生了一个输入文本框。

我在做了一些试验后意识到其实它并不是需要立刻执行,而是在使用到它的时候只需要执行第一次。那么解决方法就很简单了:

onclick="this.onclick=''; "

提醒一点,必须先事件清空,在执行后面的事件,为什么就不用说了吧。这个问题耗费了我不少时间,为什么我一开始没有想到呢,或许我太依赖搜索引擎了,在查了大量动态载入资料后才意识到我的解决方向错了。

写这么多废话,也为了做个备份,也算个教程吧。看来以后我得灵活一点。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值