How to use event delegation to add click events to three buttons and pop up the same layer pop-up box with different contents?

as shown in the figure, add a click event to the three microphone buttons on the right. Previously, you can add a click event to each button, but now you want to add it in the way of event delegation, how to achieve it? The
code is as follows:

<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>

the jquery code is as follows

   $(".icon-one").on("touchstart",function(){
        layer.open({
            title:"",
            shadeClose: false,
            style: "width:5rem;border:none;background:linear-gradient(to right bottom,-sharpf14f63,-sharp7889fb);color:-sharpfff;",
            content:$("-sharpsaying").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,-sharpf14f63,-sharp7889fb);color:-sharpfff;",
            content:$("-sharpsaying").html(),
            btn:"",
            yes:function(index){
                  layer.close(index)
            },
        })
    });

event delegation method, add click events to the parent element, because different layer content will pop up, so if makes a judgment, but no, solve?

$(".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,-sharpf14f63,-sharp7889fb);color:-sharpfff;",
                content:$("-sharpsaying").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,-sharpf14f63,-sharp7889fb);color:-sharpfff;",
                content:$("-sharpsaying").html(),
                btn:"",
                yes:function(index){
                      layer.close(index)
                },
            })
        }
    
})
Mar.02,2021

specific logic is not seen, but if ($(".icon-one")) is definitely wrong, because $(".icon-one") returns a jQ object, which is automatically converted to true , so that the above branches actually become commonplace.
this is generally used in the event callback $(this) , which is an encapsulation of e.target by jQ (equivalent to $(e.target) ). It returns the DOM object in which the event encapsulated by jQ is triggered. To determine whether it contains a class, you can use the .is () API. In short, write if ($(this). Children (). Is (".icon-one") .


determine whether the class on the element triggered by the event is the specified class
at this point in your code
if ($(".icon-one")) {


the judgment condition is changed to:

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

$(".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,-sharpf14f63,-sharp7889fb);color:-sharpfff;',
                content:$("-sharpsaying").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,-sharpf14f63,-sharp7889fb);color:-sharpfff;',
                content:$("-sharpsaying").html(),
                btn:'',
                yes:function(index){
                      layer.close(index)
                },
            })
        }
    
})

just write one. I don't know if that's what you mean:

<!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>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bc93d8-30972.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bc93d8-30972.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?