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)
                },
            })
        }
    
})
Css html5 javascript
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>

Previous: In vue, how to make the list click events in the list looped out by v-for jump to different pages

Next: When vue uses element to navigate, it will not refresh when clicking on the route of the current page. How to click on the current page of the route can also achieve refresh?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu