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

转载自: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>

  

 

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

阅读更多
上一篇Spring事务管理中@Transactional的propagation参数
下一篇js数组去重复项
想对作者说点什么? 我来说一句

图片单选按钮_jquery

2013年03月14日 836B 下载

jquery指向滑动按扭

2012年06月06日 21KB 下载

flash按扭效果

2007年04月08日 76KB 下载

表达式求值程序

2014年01月10日 4.47MB 下载

灰色按扭激活器灰色按扭激活器

2009年04月03日 157KB 下载

制作自己风格的光标按扭

2009年06月01日 11KB 下载

java编写的投票小程序

2010年06月30日 7KB 下载

jquery漂亮按扭控件

2012年06月14日 171KB 下载

没有更多推荐了,返回首页

关闭
关闭