脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → jquery 按钮事件

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

 更新时间：2012年12月10日 16:03:16   作者：  
要动态改变这个上一页按钮中onclick的函数.我自己是尝试了很多种方法，都没有做出来，下面列举的几个都是失败的例子,需要的朋友可以参考下
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中的setHours()方法的使用

    简介JavaScript中的setHours()方法的使用

    这篇文章主要介绍了简介JavaScript中的setHours()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 详解JS预解析原理

    详解JS预解析原理

    这篇文章主要介绍了JS预解析原理的相关知识，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-06-06
  • javascript获得当前的信息的一些常用命令

    javascript获得当前的信息的一些常用命令

    这篇文章主要介绍了javascript获得当前的信息的一些常用命令,需要的朋友可以参考下
    2015-02-02
  • 深入理解JavaScript系列（33）：设计模式之策略模式详解

    深入理解JavaScript系列（33）：设计模式之策略模式详解

    这篇文章主要介绍了深入理解JavaScript系列（33）：设计模式之策略模式详解,策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户,需要的朋友可以参考下
    2015-03-03
  • Javascript继承机制详解

    Javascript继承机制详解

    JavaScript的继承在很多书里面细致的分了很多种类型和实现方式，大体上就是两种：对象冒充、原型方式。这两种方式各有优点和缺陷，这里我先列举出来，再从底层分析区别
    2017-05-05
  • 详解JavaScript事件循环机制

    详解JavaScript事件循环机制

    这篇文章给大家分享了关于JavaScript事件循环机制的相关知识点内容，有兴趣的朋友们可以学习参考下。
    2018-09-09
  • Javascript Global对象

    Javascript Global对象

    Global对象是ECMAScript中最特别的对象，因为实际上它根本不存在。
    2009-08-08
  • JavaScript函数模式详解

    JavaScript函数模式详解

    文章对javascript的四种函数模式进行了详细的解释，并附上示例，方便小伙伴们理解并应用，希望对大家能有所帮助。
    2014-11-11
  • DOM 事件流详解

    DOM 事件流详解

    这篇文章主要详细介绍了DOM中的事件流，包括冒泡型事件、事件监听、标准DOM事件监听这三个方面，十分详细，推荐给大家。
    2015-01-01
  • javascript数组详解

    javascript数组详解

    数组对象用来在单独的变量名中存储一系列的值。我们使用关键词 new 来创建数组对象。有两种向数组赋值的方法，也可以使用一个整数自变量来控制数组的容量
    2014-10-10

最新评论