Проблема дублирует значение, когда я console.log на начальной загрузке tagsinput

У меня есть ошибка с Bootstrap Tagsinput следующим образом: я добавляю div строки, когда нажимаю кнопку «Add property» (внутри строки есть tagsinput), а затем я нажимаю кнопку «Show», чтобы показать console.log. Но я получил ошибку: console.log показать мне дубликаты значений, когда у меня есть две или более строк.

А вот мой codepen: https://codepen.io/LinhNT/pen/WNvmygx.

$(document).ready(function () {
    $('.js_add_property').click(function () {
      const wraper = $('#js_add_property_wraper');
      addProperty(wraper);
    });
});

function addProperty(wraper) {
  const template = `<div class="row property-row">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label>Name</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                      <div class="col-md-5">
                        <div class="form-group">
                          <label>Tags</label>
                          <input type="text" class="tags-input">
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="form-group">
                          <label>Actions</label>
                          <div>
                            <button class="btn btn-primary js_show_data">Show</button>
                            <button class="btn btn-secondary js_remove_row">Remove</button>
                          </div>
                        </div>
                      </div>
                    </div>`;
  
  wraper.append(template);

  $('.tags-input').tagsinput();

  showTableProduct();

  const button = $('.js_remove_row');
  removeRow(button);
}

function removeRow(button) {
  button.click(function () {
    $(this).parents('.property-row').remove();
    $('.tags-input').tagsinput('reset');
    $('.tags-input').tagsinput();
  })
}

function showTableProduct() {
  $('.js_show_data').click(function () {
    const tagInput = $(this).parents('.property-row').find('.tags-input');
    console.log(tagInput.tagsinput('items'))
  })
}
.bootstrap-tagsinput {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.bootstrap-tagsinput input {
    padding: 0;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-info {
    background-color: #5bc0de;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<div class="display-list">
  <div id="js_add_property_wraper"></div>
  <button class="btn btn-primary js_add_property">Add property</button>
</div>

Спасибо.


javascript jquery bootstrap-4 bootstrap-tags-input
person Linh Nguyễn    schedule 01.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте изменить свой код следующим образом:

$(document).ready(function () {
          $('.js_add_property').click(function () {
            const wraper = $('#js_add_property_wraper');
            addProperty(wraper);
          });



          $(document).on('click','.js_show_data', function(){
            const tagInput = $(this).parent().parent().parent().parent('.property-row').find('.tags-input');
            console.log(tagInput.tagsinput('items'));
          });


        });

        function addProperty(wraper) {
          const template = `<div class="row property-row">
                              <div class="col-md-3">
                                <div class="form-group">
                                  <label>Name</label>
                                  <input type="text" class="form-control">
                                </div>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                  <label>Tags</label>
                                  <input type="text" class="tags-input">
                                </div>
                              </div>
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label>Actions</label>
                                  <div>
                                    <button class="btn btn-primary js_show_data">Show</button>
                                    <button class="btn btn-secondary js_remove_row">Remove</button>
                                  </div>
                                </div>
                              </div>
                            </div>`;

          wraper.append(template);

          $('.tags-input').tagsinput();

          const button = $('.js_remove_row');
          removeRow(button);
        }

        // showTableProduct();

        function removeRow(button) {
          button.click(function () {
            $(this).parents('.property-row').remove();
            $('.tags-input').tagsinput('reset');
            $('.tags-input').tagsinput();
          })
        }

Я также прикрепил экран, который также доказывает, что в консоли отображается только введенное значение нажатой кнопки. введите здесь описание изображения

person Elman Huseynov    schedule 01.04.2020
comment
Это работает, проверьте мой codepen: codepen.io/huseyn0w/pen/wvaOxEr?editors= 1111 - person Elman Huseynov; 01.04.2020
comment
Нет. Я имею в виду, что если у вас есть две строки (просто дважды нажмите кнопку «Добавить свойство»), вы получите эту ошибку. - person Linh Nguyễn; 01.04.2020
comment
Когда у вас есть две строки, вы нажимаете кнопку «Показать» в первой строке, console.log покажет повторяющиеся значения, сэр. - person Linh Nguyễn; 01.04.2020