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 相关文章推荐
JS实现日期加减的方法
Nov 29 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python数据分析库pandas基本操作方法
2018/04/08 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Django数据统计功能count()的使用
2020/11/30 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
会计实习期自我鉴定
2013/10/06 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
捐书寄语赠言
2014/01/18 职场文书
求职信怎么写
2014/05/23 职场文书
公司合作意向书范文
2014/07/30 职场文书
公司委托书格式范本
2014/09/16 职场文书
旷课检讨书500字
2014/10/14 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python