• on() 和 click() 的区别


    on() 和 click() 的区别:

    二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。

    以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素,使用 click() 这种写法,点击 Delete 按钮无法删除;使用 On() 方式可以。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script>
    $("#newclick").click(function(){ 
        $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
    });
    $("#newon").click(function(){ 
        $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 
    });
    $(".delete").click(function(){ 
        $(this).parent().remove(); 
    }); 
    
    $(".li").on('click', ".deleteon", function(){
        $(this).parent().remove(); 
    })
    $(".deleteclick").click(function(){ 
        $(this).parent().remove(); 
    });
    </script>
    </head>
    <body>
    <h1>展示jQuery中on()和click()的区别</h1>
    
    <p>
        <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现,NewClick生成的Delete按钮行为用click()实现。</span>
    </p>
    <div class="test">
        <button class="new" id="newon">NewOn</button> 
        <button class="new" id="newclick">NewClick</button>
        <ul class="li"> 
            <li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
            <li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
        </ul> 
    </div>
    </body>
    </html>
  • 相关阅读:
    思考c++编程-译自c++ programming language 1.7节
    对于(学习c++)的c程序员的建议
    输入框字数统计效果
    去掉tppabs冗余代码
    分享JS实现IE6 PNG完全透明(包括背景图片)
    系统启动过程
    VBP结构介绍
    python的xml文件操作
    javascript实现手动调整下拉列表框
    javaScript实现从一个下拉列表到另一个下拉列表
  • 原文地址:https://www.cnblogs.com/langxing/p/9055515.html
Copyright © 2020-2023  润新知