Jquery学习-用Jquery添加一个按扭后无法动态对该按扭实行监听解决方法

转载 2013年12月03日 15:36:34

转载自:http://www.cnblogs.com/cxeye/archive/2012/07/18/2596903.html

 

好久都没有接触Jquery了。以前学过一段时间Jquery,这些天又温习了起来。Jquery的语句很美。用Js几行甚至要十几行才能做到,用Jquery一行到几行就可以做到了。虽然他牺牲了一点时间效率,但就对于简单的网页脚本处理或者简ajax处理,牺牲的这一丁点效率真是不足为挂。

        但Jquery还是有一些问题得用Js来解决的。说说我这些天遇到的这个问题:在Jquery里append一个button按扭后,无法用Jquery对这个按扭进行监听。

        下面是具体的代码,发现alert("test监听到木有");这句没有起到作用。

<head>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //加载按扭
            $("#loadBtn").click(function () {
                $("#comUL").append("这是一个按扭");
                $("#comUL").append("<input type='button' id='btn1' value='按扭' />");
            });
            //对加载的按扭进行监听
            $("#btn1").click(function () {
                alert("test监听到木有");
            });
        });  
    </script>
</head>
<body>
    <ul id="comUL">
     
    </ul>
 
    <input type="button" id="loadBtn" value="加载按扭" />

  
          那么怎么用js实现给这个按扭加一个方法呢?

          其实很简单,这句$("#comUL").append("<input type='button' id='btn1' value='按扭' />");里面再加一个onclick,给onclick里加一个方法。具体代码如下:

复制代码
<head>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //加载按扭
            $("#loadBtn").click(function () {
                $("#comUL").append("这是一个按扭");
                $("#comUL").append("<input type='button' id='btn1' value='按扭' onclick='test()' />");
            });
        });

        function test() {
            alert("test");
        }   
    </script>
</head>
<body>
    <ul id="comUL">
    
    </ul>
    <input type="button" id="loadBtn" value="加载按扭" />
</body>
复制代码

          可是我们实际应用中,可能需要获取按扭里面的属性值,例如获取id的属性值,那怎么做?可以在onclick属性的方法里把this只传递过去,像这样onclick='test(this)' 具体代码如下:

</head>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //加载按扭
            $("#loadBtn").click(function () {
                $("#comUL").append("这是一个按扭");
                $("#comUL").append("<input type='button' id='btn1' value='按扭' onclick='test(this)' />");
            });
        });
 
        function test(e) {
            alert(e.id);
        }  
    </script>
</head>
<body>
    <ul id="comUL">
     
    </ul>
 
    <input type="button" id="loadBtn" value="加载按扭" />
<body>

        可是我们实际上有时候觉的需要在test方法里使用jquery来操作比较方便,那么怎么做?这时我们可以把onclick属性方法里传递过来的this进行封装成jquery的this,就可以实现了用Jquery的操作。具体代码如下:

</head>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //加载按扭
            $("#loadBtn").click(function () {
                $("#comUL").append("这是一个按扭");
                $("#comUL").append("<input type='button' id='btn1' value='按扭' onclick='test(this)' />");
            });
        });
 
        function test(e) {
            alert($(e).attr('id'));
            $(e).hide();
        }  
    </script>
</head>
<body>
    <ul id="comUL">
     
    </ul>
 
    <input type="button" id="loadBtn" value="加载按扭" />
</body>

  

 

好了,这个小问题就解决了!但我却折腾好一会。

JQuery操作单选按扭

单选按钮:-----------------------------------------------------------------------------------------------...
  • selonteng
  • selonteng
  • 2009年12月19日 09:08
  • 237

取消按回車后就响应Button事件的JavaScript

加入这段JavaScript代码即可把Enter事件改为Tab功能    if(event.keyCode==13 && event.srcElement.type!='button' && even...
  • jiang0609
  • jiang0609
  • 2010年09月02日 15:00
  • 762

知乎安卓客户端关注和取消关注的这个按钮点击特效是怎么实现的?

点击打开链接 作者:轩辕 链接:http://www.zhihu.com/question/41586221/answer/107630865 来源:知乎 著作权归作者所有...
  • rabbit_in_android
  • rabbit_in_android
  • 2016年08月23日 09:43
  • 572

android按钮状态

android:drawable 放一个drawable资源 android:state_pressed 是否按下,如一个按钮触摸或者点击。 android:state_focused 是否取得焦点,...
  • cc996
  • cc996
  • 2017年04月06日 18:11
  • 117

android studio 两次按钮,不同效果

点击两次,不同效果: tx1=(TextView)findViewById(R.id.textview1); btn=(Button)findViewById(R.id.btn); btn....
  • sdsfs443
  • sdsfs443
  • 2016年08月05日 21:24
  • 290

聊聊“扭蛋”,即常规的付费抽奖

文中说的扭蛋,即是常规的付费抽奖。 1. 如何设定免费抽奖的冷却   有不少游戏,免费抽奖的冷却,会设定为24小时整或48小时整。   以24小时为例。如果冷却为24小时整,今天抽奖...
  • sunnygts
  • sunnygts
  • 2016年05月27日 09:58
  • 277

怎么把提交按扭改为用图片来代替

应用背景: 这段时间在做嵌入式web网站开发的过程中,需要把网页上的数据提交到cgi程序中,但是html不加以美化的提交表单按钮和界面格格不入,于是想到用图片来替换按键,以下是从博客上搜到的解决方...
  • kaloha3
  • kaloha3
  • 2013年01月30日 15:51
  • 8422

PB 上传图片后,所有按钮图片都不显示了

1. 上传之前定义全局变量:gs_path,获取应用程序当前路径:   gs_path = GetCurrentDirectory() 2.上传完成之后使用ChangeDirectory(...
  • u014672920
  • u014672920
  • 2017年09月26日 11:23
  • 86

jQuery Mobile 弹出-创建按扭

按钮 主页 选项 搜索 下一页面 信息 底部文本 按钮 返回 上一页 信息 底部文本 主页 家是心之所...
  • familycode
  • familycode
  • 2014年11月18日 22:48
  • 375

asp.net MVC 点击下载文档

导入请点击按钮下载模板: controller action:  public class...
  • lonestar555
  • lonestar555
  • 2012年03月13日 17:46
  • 1667
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery学习-用Jquery添加一个按扭后无法动态对该按扭实行监听解决方法
举报原因:
原因补充:

(最多只允许输入30个字)