如何利用事件委托给3个按钮添加点击事件，并弹出同一个但内容不一样的layer弹框？

Question

如图，给右边3个话筒按钮添加点击事件，之前是给每个按钮分别添加点击事件可以，但是目前想用事件委托的方式添加，如何实现？
代码如下：

<form action="" id="myform">
    <div class="box">
        <div class="num">
            <label for="">保单号</label>
            <input type="text" placeholder="请填写保单号"/>
        </div>
        <div class="num-btn">
            <span class="icon-one iconfont icon-qy-yy-h"></span>
        </div>
    </div>
    <div class="box">
        <div class="idcard">
            <label for="">身份证</label>
            <input type="text" placeholder="请输入身份证号" autocomplete="off"/>
        </div>
        <div class="num-btn">
            <span class="icon-two iconfont icon-qy-yy-h"></span>
        </div>
    </div>
    <div class="box">
        <div class="bcard">
            <label for="">银行卡</label>
            <input type="text" placeholder="请填写银行卡号"/>
        </div>
        <div class="num-btn">
            <span class="icon-three iconfont icon-qy-yy-h"></span>
        </div>
    </div>
</form>

jquery代码如下

   $(".icon-one").on("touchstart",function(){
        layer.open({
            title:'请说出保单号',
            shadeClose: false,
            style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
            content:$("#saying").html(),
            btn:['确认'],
            yes:function(index){
              layer.close(index)
          },
        })
            
     });

    $(".icon-two").on("touchstart",function(){
        layer.open({
            title:'请说出身份证号',
            shadeClose: false,
            style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
            content:$("#saying").html(),
            btn:'确认提交',
            yes:function(index){
                  layer.close(index)
            },
        })
    });

事件委托方式，给父元素添加点击事件，因为要弹出不同的layer内容，所以if做判断，但是不对,求解？

$(".num-btn").on("touchstart","span",function(){
        if($(".icon-one")){
            layer.open({
                title:'请说出保单号',
                shadeClose: false,
                style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
                content:$("#saying").html(),
                btn:['确认'],
                yes:function(index){
                  layer.close(index)
              },
            })
        }else if($(".icon-two")){
            layer.open({
                title:'请说出身份证号',
                shadeClose: false,
                style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
                content:$("#saying").html(),
                btn:'确认提交',
                yes:function(index){
                      layer.close(index)
                },
            })
        }
    
})

Answer 1

$(".num-btn").on("touchstart","span",function(event){
        var target = $(event.target);
        if(target.hasClass("icon-one")){
            layer.open({
                title:'请说出保单号',
                shadeClose: false,
                style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
                content:$("#saying").html(),
                btn:['确认'],
                yes:function(index){
                  layer.close(index)
              },
            })
        }else if(target.hasClass("icon-two")){
            layer.open({
                title:'请说出身份证号',
                shadeClose: false,
                style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
                content:$("#saying").html(),
                btn:'确认提交',
                yes:function(index){
                      layer.close(index)
                },
            })
        }
    
})

Answer 2

具体逻辑没看，但if($(".icon-one"))这种写法肯定是不对的，因为$(".icon-one")返回的是个jQ对象，自动转换为true，这样上边的分支实际就变成常通了。
这种一般是要在事件回调中用到$(this)，这个是jQ对e.target的一个封装(相当于$(e.target))，它返回的是jQ封装的事件被触发的那个DOM对象，而判断是否包含一个类，则可以用.is()这个API。简而言之，写成if ( $(this).children().is(".icon-one") )吧。

Answer 3

判断事件触发的元素上的class是否为指定的class
在你代码的这个地方
if($(".icon-one")){

Answer 4

判断条件改为：

if($(this).children('span')===$('.icon-one')){
    ...
}

Answer 5

随便写一个吧。也不知道这样是不是你的意思：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button class="button A">button A</button>
<button class="button B">button B</button>
<button class="button C">button C</button>

<script src="jquery.js"></script>
<script>
    $('body').on('click', '.button', function () {
        var _this = $(this);
        if (_this.hasClass('A')) {
            alert('click A');
        } else if (_this.hasClass('B')) {
            alert('click B');
        } else if (_this.hasClass('C')) {
            alert('click C');
        }
    });

</script>

</body>
</html>