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

        好久都没有接触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)