JQuery -> 新的 span id 点击功能没有响应

如何解决JQuery -> 新的 span id 点击功能没有响应

我正在尝试使用 CSS 转换来创建一个带箭头的跨度来打开和关闭，但它仅在我单击箭头打开时才有效，但不能响应关闭。

$(document).ready(function(){
  $('#openarrow').click(function(){
   var dsptmt = setTimeout(function(){ $('#usernameid').css('display','inline-block'); },1100);
   $('.chip').width('170');
   $('.arrow').removeClass('arright');
   $('.arrow').addClass('arleft');
   $('#openarrow').attr('id','closearrow');
  })

  $('#closearrow').click(function(){
    $('.arrow').removeClass('arleft');
    $('.arrow').addClass('arright');
    $('#usernameid').css('display','none');
    $('.chip').width('100');
    $('#closearrow').attr('id','openarrow');
  });
});

.chip {
  font-family: 'Abel',sans-serif;
  display: inline-block;
  padding: 0 25px;
  width:100px;
  height: 50px;
  font-size: 16px;
  color: blue;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
  transition: width,2s ;
}

#usernameid {
    display:none;
}
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.arright {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arleft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <div class="w3-container my-1 py-1 w3-light shadow" style="position:relative;">
     <div class="col-lg-9 col-md-6 col-sm-4">
       <div class="chip">
         <div id="usernameid" style="color:darkblue;"> FULL NAME </div>
         <span id="openarrow" class="float-right"><a href="#"><i class="arrow arright"></i></a></span>
       </div>
     </div>
   </div>
</div>

当我单击打开和关闭箭头时，我需要 #closearrow 将所有更改返回到默认值。

解决方法

这个问题是在您应用事件处理程序时不存在 ID 为 #closearrow 的元素。如果您想保持这种范式，一种选择是使用 事件冒泡 实质上将 .chip 上的事件处理程序应用于 closearrow 元素，因为 .chip 将始终存在。见下文。

$(document).ready(function(){
  $('.chip').on('click','#openarrow',function(){
   var dsptmt = setTimeout(function(){ $('#usernameid').css('display','inline-block'); },1100);
   $('.chip').width('170');
   $('.arrow').removeClass('arright');
   $('.arrow').addClass('arleft');
   $('#openarrow').attr('id','closearrow');
  })

  $('.chip').on('click','#closearrow',function(){
    $('.arrow').removeClass('arleft');
    $('.arrow').addClass('arright');
    $('#usernameid').css('display','none');
    $('.chip').width('100');
    $('#closearrow').attr('id','openarrow');
  });
});

.chip {
  font-family: 'Abel',sans-serif;
  display: inline-block;
  padding: 0 25px;
  width:100px;
  height: 50px;
  font-size: 16px;
  color: blue;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
  transition: width,2s ;
}

#usernameid {
    display:none;
}
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.arright {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arleft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <div class="w3-container my-1 py-1 w3-light shadow" style="position:relative;">
     <div class="col-lg-9 col-md-6 col-sm-4">
       <div class="chip">
         <div id="usernameid" style="color:darkblue;"> FULL NAME </div>
         <span id="openarrow" class="float-right"><a href="#"><i class="arrow arright"></i></a></span>
       </div>
     </div>
   </div>
</div>