javascript - 无法访问 jQuery 插入的元素

Question

<分区>

Answer 1

$('.wrap').on('click', '.chip', function() {
  console.log('click');
});

$('.wrap input').on('keydown', function(e) {
  var key = e.which,
      input = $(this),
      value = input.val();
	
  if(key === 13) {
    if(value != '') {
      $('<div class="chip">' + value + '</div>').insertBefore(input);
      $(input).val('');
    }
  }
});

.wrap {
  box-sizing: border-box;
  width: 80%;
  height: 55px;
  line-height: 55px;
  border: 1px solid #bebebe;
  border-radius: 28px;
  padding: 0 .5rem;
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: auto;
}

.wrap .chip {
  font-size: 14px;
  font-weight: 300;
  background: #e6e6e6;
  border-radius: 20px;
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  margin-right: 5px;
}

.wrap input {
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: 400;
  border: none;
  flex: 1;
}

.wrap input:focus {
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="chip">tag1</div>
  <input type="text">
</div>

事件仅绑定(bind)到 DOM 中可用的元素。为了说明新插入的 dom 节点，您必须将事件委托(delegate)给在绑定(bind)事件时可用的祖先。

改变

$('.chip').on('click', function() {
  console.log('click');
});

到

$('body').on('click', '.chip', function() {
  console.log('click');
});

body 可以替换为绑定(bind)时 DOM 中最接近的祖先。