关于jquery 的on 方法

ILOVE_ASPNET 2013-05-31 04:50:33

以前一直是用低版本的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>

...全文

202 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

ILOVE_ASPNET 2013-06-01

打赏
举报

引用 13 楼 jslang 的回复:

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

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

天际的海浪 2013-05-31

打赏
举报

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

ILOVE_ASPNET 2013-05-31

打赏
举报

引用 9 楼 xiaofanku 的回复:


<!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>

高手啊，学习了。

ILOVE_ASPNET 2013-05-31

打赏
举报

引用 8 楼 xiaofanku 的回复:

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

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

街头小贩 2013-05-31

打赏
举报

或者:


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

街头小贩 2013-05-31

打赏
举报


<!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>

街头小贩 2013-05-31

打赏
举报

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

ILOVE_ASPNET 2013-05-31

打赏
举报

引用 4 楼 jslang 的回复:

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

有点好奇做了如下的测试，发现 $(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>

ILOVE_ASPNET 2013-05-31