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)
},
})
}
})