欢迎光临
我们一直在努力

关于jQuery里的live与on

jquery从1.7版本添加了on,而从1.9+版本已经不再支持live,取而代之的是on事件。那么我们应该怎么写呢?现举例如下,GOODLUCK!

如果简单的将原来的live换成on,可能会使很多事件不起作用,如下面的实例中点击增加按钮后,在新添加的区域点击后没有反应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>live V on</title>
</head>
<body>
<div class="add">
    <div class="plus" style="width:200px;height:200px;background-color: yellowgreen">点增加后再点击增加的内容测试点击事件</div>
</div>
<button id="btn">增加</button>
<script type="text/javascript" src="https://www.dvy.com.cn/wp-content/themes/dux/js/libs/jquery-1.12.3.min.js?ver=1.4"></script>
<script>
    $("#btn").click(function () {
        $(".add").append($(".add:first").html());
    });
    $(".plus").on("click", function () {
        alert("clicked");
    });
</script>
</body>
</html>

我们将写法改写一下:

    $(document).on("click",".plus", function () {
        alert("clicked");
    });

完整的HTML,你再试一下,是不是可以使用了?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>live V on</title>
</head>
<body>
<div class="add">
    <div class="plus" style="width:200px;height:200px;background-color: yellowgreen">点增加后再点击增加的内容测试点击事件</div>
</div>
<button id="btn">增加</button>
<script type="text/javascript" src="https://www.dvy.com.cn/wp-content/themes/dux/js/libs/jquery-1.12.3.min.js?ver=1.4"></script>
<script>
    $("#btn").click(function () {
        $(".add").append($(".add:first").html());
    });
    $(document).on("click",".plus", function () {
        alert("clicked");
    });
</script>
</body>
</html>

 

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 关于jQuery里的live与on

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址