zoukankan      html  css  js  c++  java
  • 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# 调用office 2007 及 SaveAsPDFandXPS.exe 将Word、Excel、PPT转换为PDF文件
    64位机子上未能加载集
    在 vs 2003 转 2008 时WEB项目不能转换
    【第一弹】测试小学生,终于有博客了
    RobotFramwork + Appium+ Andriod 环境搭建
    写webpart
    backup
    获取MOSS当前登录用户信息
    rotate with different image(轮换显示图片)
  • 原文地址:https://www.cnblogs.com/langxing/p/9055515.html
Copyright © 2011-2022 走看看