zoukankan      html  css  js  c++  java
  • jQuery中on方法的两种用法,第二个参数为选择器,一般会省略

      用了这么久的jQuery,今天读源码时发现$('...').on可以接受三个参数,以前对这些细节都没注意!

      下面两端jQuery代码:它们实现的功能都是一样,即是当点击$('#table td')的时候,在td中动态添加一个input文本框代替原有的值,将td原来的值放到input中的;

    第一段代码:在$('#table td')的click事件函数中,添加input的click事件,这里需注意两点:

      1、因为事件冒泡,input出现后就不能编辑,需要加上 e.stopPropagation();阻止冒泡;

      2、新生成的$('#table td input')得点击事件的绑定,on方法只有两个参数,这是常用的;

    $('#table td').click(function (e) {
            e.stopPropagation();
            var oldVal=$(this).text();
            var newVal='<input value="'+oldVal+'"/>';
            $(this).html(newVal);
    });
    $('#table td input').on('click', function (e) {
            e.stopPropagation();
            console.log(this);
    });

     第二段代码:效果和第一段代码完全一样,只是on的用法有点小变化

      1、关键点:$('#table td').on('click','input', function (e) {...});

      2、此时on方法有三个参数,第二个参数 'input' 为选择器,指的是$('#table td')的子元素,

    $('#table td').click(function (e) {
            e.stopPropagation();
            var oldVal=$(this).text();
            var newVal='<input value="'+oldVal+'"/>';
            $(this).html(newVal);
    });
    $('#table td').on('click','input', function (e) {
            e.stopPropagation();
            console.log(this);
    });

      

  • 相关阅读:
    增强的for循环(或foreach)
    XMLHTTP使用具体解释
    数据转换
    JS来推断文本框内容改变事件
    Java学习笔记——JDBC之PreparedStatement类中“预编译”的综合应用
    同类软件大比拼
    Java实现 蓝桥杯 历届试题 最大子阵
    Java实现 蓝桥杯 历届试题 最大子阵
    Java实现 蓝桥杯 历届试题 最大子阵
    Java实现 蓝桥杯 历届试题 最大子阵
  • 原文地址:https://www.cnblogs.com/aredleave/p/7604440.html
Copyright © 2011-2022 走看看