• 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>
  • 相关阅读:
    AtCoder,Codeforces做题记录
    最小割分治(最小割树):BZOJ2229 && BZOJ4519
    [BZOJ2209][JSOI2011]括号序列(splay)
    [BZOJ5461][LOJ#2537[PKUWC2018]Minimax(概率DP+线段树合并)
    [LOJ#2540][PKUWC2018]随机算法(概率DP)
    [CC-SEABUB]Sereja and Bubble Sort
    [CC-ANUGCD]Maximum number, GCD condition
    [HDU5965]扫雷
    [ZJOI2007]最大半连通子图
    [BZOJ2152]聪聪可可
  • 原文地址:https://www.cnblogs.com/langxing/p/9055515.html
Copyright © 2020-2023  润新知