关于jquery 的on 方法

以前一直是用 低版本的jq 库 1.7 1.8左右的， 然后绑定事件都是用的 静态的用bind绑定，动态的用live 绑定的， 现开发新的项目打算用1.9 版的库 听说1.9 的on 已合并了 bind ,live,delegate 但是奇怪的是 我做了个测试还是没办法实现 live的效果啊， 动态生成的元素还是没办法成功绑定事件，
这是什么情况 ？<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>    <table>
        <tr>
            <td>
                <p id="pclick">点我给页面添加一个按钮</p>
            </td>
        </tr>
    </table>
    <script>        $(function () {
            $("#pclick").on("click", function () {
                $("<input type='button' value='test' id='btnTest' />").insertAfter($(this));
            });            $("#btnTest").on("click",  function () {
                alert("进来了");
            });
        })
    </script>
</body>
</html>

解决方案 »

  1.   

                $(document).on("click", "#btnTest", function () {
                    alert("进来了");
                });
      

  2.   

    怎么没意思？ 很有意思的， 因为传统的live 性能比较差，1.9版本做这些整合就是为了避免bind不支持动态数据的事件绑定，也解决了live 性能的问题
      

  3.   


    亲， 为什么一定是这样的写法了？  难道只有这种格式的话 才会像以前的live方式？ 如果写成这样
      $("#btnTest").on("click",  function () {
                    alert("进来了");
                });
    他就会走bind方式？
      

  4.   

    有点好奇做了如下的测试 ，发现 $(document) 这个选择器只能是他的父级，不能是其它的选择器类型<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="Scripts/jquery-1.9.1.min.js"></script>
    </head>
    <body>    <table>
            <tr>
                <td>
                    <p id="pclick">点我给页面添加一个按钮</p>
                </td>
            </tr>
        </table>    <div>
            <input type="button" name="btnTest" value="我一直都在" />
        </div>
        <script>        $(function () {
                $("#pclick").on("click", function () {
                    $("<input type='button' value='test' name='btnTest' />").insertAfter($(this));
                });            $("td").on("click", "input[name='btnTest']", function () {
                    alert("进来了td");
                });
                $("div").on("click", "input[name='btnTest']", function () {
                    alert("进来了div");
                });
                $("button").on("click", "input[name='btnTest']", function () {
                    alert("进不来");
                });
            })
        </script>
    </body>
    </html>
      

  5.   

    你不知道javascript是支持锁链书写的吗？你有意往不正常运行的方式写怪的了jQuery吗
      

  6.   


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
     
        <table>
            <tr>
                <td>
                    <p id="pclick">点我给页面添加一个按钮</p>
                </td>
            </tr>
        </table>
        <script>
     
            $(function () {
                $("#pclick").on("click", function () {
                    var newE=$("<input type='button' value='test' id='btnTest' />").bind('click',function () {
                     alert("进来了");
                 });
    newE.insertAfter($(this));
                });
            })
        </script>
    </body>
    </html>
      

  7.   

    或者: $("<input type='button' value='test' id='btnTest' />").bind('click',function () {
                     alert("进来了");
                 }).insertAfter($(this));
      

  8.   


    没 不是怪jquery 哦，只是自己不理解on 这个方法 ，对JS也不很熟悉，  有些小疑问，问问，讨论下了。
      

  9.   

    http://www.css88.com/jqapi-1.9/old.html#p=on
      

  10.   

     确实是自己懒了点没仔细去看API，惭愧啊。