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>

  

 

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

动态生成的html中无法使用jquery事件的解决方法

jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替。本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数...

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

现象:        AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等   处理方法:       在html片...

javascript中采用jQuery ajax动态加载js文件的解决方法

var Env = new function () { this.envPath = null; this.getPath = function () { this.e...
  • hsg77
  • hsg77
  • 2016年04月19日 19:09
  • 2588

一个完全独立的、简洁的jquery前端分页组件,用到动态添加页内样式的方法哦。

以前一直没有动态往页面添加过可被调用样式类,今天为了封装的独立性(只有js文件),尝试了一下,竟然能行,因此记录下来,已备后用...

jquery无法找到其他父级子集解决方法

方法一:结合php解决错乱问题,给选择项加入class删除class解决 情况:页面中纯在两个相同的子集和相同的父级元素 $(function(){ //删除订单功能 ...

jQuery的ajax无法获得$(this)的解决方法

首先看一段代码 $(".delUser").click(function(){                  var id=$(this).parents("tr").find("input"...

jquery ajax return值无法获取的解决方法

大家先看一段简单的jquery ajax 返回值的js  代码: function getReturnAjax{  $.ajax({  type:"POST",  u...

【jQuery】为动态生成的元素添加时间监听

一、 $. live () 方法          根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。 返回值:jQu...

js代理监听动态添加元素事件(类似jquery的delegate事件)

很多时候我们需要监听动态添加的元素事件。 举个例子: 页面中有一个div,div中有一个button以及一个table,我们需要在点击button的时候相应的table行进行排序,而根据特定需求aja...

UpdatePanel和Jquery冲突的解决方法

  • 2014年10月26日 19:38
  • 16KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery学习-用Jquery添加一个按扭后无法动态对该按扭实行监听解决方法
举报原因:
原因补充:

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