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='按扭' οnclick='test()' />");
            });
        });

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

可是我们实际应用中，可能需要获取按扭里面的属性值，例如获取id的属性值，那怎么做？可以在onclick属性的方法里把this只传递过去，像这样οnclick='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>