can't access elements inserted by jQuery

Question

I made myself a little tag input field but i can't access the inserted tags with jquery.

Everytime you hit enter the value of the input field will be inserted before the input as a <div class="chip"></div>.

If i try to do something on click it's only working for tags that aren't inserted by the input.

$('.chip').on('click', 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>

score 1 · Answer 1 · answered Jun 11 '18 at 23:11

$('.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>

The events are only bound to the elements that are available in the DOM. To account for the newly inserted dom nodes, you will have to delegate the events to the ancestors which are available at the time of binding the events.

Change

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

to

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

body can be replaced with the closest ancestor that is present in your DOM at the time of binding.

can't access elements inserted by jQuery

1 Answers1