如何利用事件委托给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做判断，但是不对,求解？

Answer 1

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

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')){&nbsp; &nbsp; ...}

Answer 5

随便写一个吧。也不知道这样是不是你的意思：<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <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>&nbsp; &nbsp; $('body').on('click', '.button', function () {&nbsp; &nbsp; &nbsp; &nbsp; var _this = $(this);&nbsp; &nbsp; &nbsp; &nbsp; if (_this.hasClass('A')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('click A');&nbsp; &nbsp; &nbsp; &nbsp; } else if (_this.hasClass('B')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('click B');&nbsp; &nbsp; &nbsp; &nbsp; } else if (_this.hasClass('C')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('click C');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });</script></body></html>