jquery应该如何来设置改变按钮input的onclick事件


Posted in Javascript onDecember 10, 2012

jquery应该如何来设置按钮input的onclick事件?比如开始时有个按钮: <input id=”prebt” type=”button” value=”上一页” onclick=”ToPage(2)”/>这行代码是在程序后台生成的,和Discuz!NT论坛源码中的做法一样,页面上所有的东西连同脚本都是由后台代码生成..然后用jquery.ajax加载到页面上来..其他的除了ie8不能显示之外..其它浏览器都正常.现在的问题是:要动态改变这个上一页按钮中onclick的函数.我自己是尝试了很多种方法,都没有做出来,下面列举的几个都是失败的例子:
1.JavaScript code:

$(“#prebt”).unbind(“onclick”,function(){var p= $(“#nextbt”).parent();$(“#nextbt”).remove(); 
p.append(“<input id=\”nextbt\” type=\”button\” value=\”编辑\” onclick=\”ToPage(14)\”/>”)}); 
JavaScript code: 
$(“#prebt”).removeAttr(“onclick”); 
$(“#prebt”).attr(“onclick”,”ToPage(4)”); 
或者: 
$(“#prebt”).attr(“onclick”,”"); 
$(“#prebt”).attr(“onclick”,”ToPage(4)”);

2.JavaScript code:
$(“#prebt”).removeAttr(“onclick”); 
$(“#prebt”).click(function(){ToPage(4)}); //此句会导致死循环..不知是怎么回事.. 
//我做的分页功能…这样写导致数据一直在乱跳,应该怎样来解决呢?

实在是没有办法了,只能是在网上发布了相关的请求,有朋友问我,是否我要的效果就如下面的:
$(“#prebt”).unbind(“onclick”); 
$(“#prebt”).bind(“onclick”,”ToPage(4)”);

其实我要的效果就是跟上面的一样的,但是上面的方法跟我原本的效果是差不多的,也是没办法执行,而且根本都绑定不上去.
又有热心的网友给了一个我代码例子,说是对我有帮助,如下的细节:
XML/HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
function toPage(id){alert(id);} 
$(function(){ 
$('#btndemo').removeAttr('onclick').unbind('click').click(function(){ 
toPage(1); 
}) 
}) 
//]]> 
</script> 
</head> 
<body> 
<input id="btndemo" type="button" value="click" onclick="toPage(4)" /> 
</body> 
</html>

以上在ie8中测试时,单击时候结果为1,即使是这样,但是还不是我原本所想要的效果。难道是真的没有方法可以实现了吗?
最终我还是自己给想出了一个比较笨的方法,可以实现的,如下:
<span id=”prespan”><input id=”prebt” type=”button” value=”上一页” onclick=”ToPage(2)”/></span>

然后后台程序自自动把prespan中的内容替换掉.
$(‘#prespan').empty(); 
$(‘#prespan').append(“<input id=\”prebt\” type=\”button\” value=\”上一页\” onclick=”\ToPage(4)\”/>”);

虽然没有用到设置onclick.但最后还是解决了我的难题。
Javascript 相关文章推荐
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 #Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 #Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 #Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 #Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 #Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 #Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 #Javascript
You might like
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
javascript时区函数介绍
2012/09/14 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
基于python实现微信模板消息
2015/12/21 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
《第一朵杏花》教学反思
2014/04/16 职场文书
师德演讲稿范文
2014/05/06 职场文书
2014年营业员工作总结
2014/11/18 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python