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 相关文章推荐
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
详解Vue单元测试case写法
May 24 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
JS实现4位随机验证码
Oct 19 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
脚本收藏iframe
2006/07/21 Javascript
Javascript - HTML的request类
2007/01/09 Javascript
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
对python3中, print横向输出的方法详解
2019/01/28 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
物业管理计划书
2014/01/10 职场文书
企业军训感言
2014/02/08 职场文书
大学自主招生推荐信
2014/05/10 职场文书
校园元旦活动总结
2014/07/09 职场文书
夫妻吵架保证书
2015/05/08 职场文书
运动会3000米加油稿
2015/07/21 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Vue2.0搭建脚手架
2022/03/13 Vue.js
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python