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

Question

我正在尝试使用 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 来 return 当我点击打开和关闭箭头时，所有更改都是默认值。

Answer 1

此问题是在您应用事件处理程序时不存在 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>

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

JQuery -> New span id click function is not responding

html

jquery

element

function

click