Блог

Главная - Вопросы по программированию - Jquery: как получить родительский div элемента и клонировать его?

Jquery: как получить родительский div элемента и клонировать его?

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

При нажатии кнопки addField_1 я должен клонировать div контейнера (id = ‘projection’) и добавить его прямо под ним.

Я делаю это следующим jquery образом:

 $('[id^="addField"]').click(() => {
    var containerDiv = $(this).parent();
    console.log(containerDiv.attr('id'));
    containerDiv.after(containerDiv.clone());
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="projection" >
    <select class="form-control" aria-placeholder="Select field"></select>
    <button type="button" class="btn btn-light" id="addField_1" name="mybutton"> </button>
</div>

При нажатии кнопки ошибки нет. Но div не копируется. Я также попытался зарегистрировать идентификатор родительского div. Он также не определен. Пожалуйста, скажите мне, что я делаю не так.

Комментарии:

1. addField есть addField_1 ?

2. При попытке нет ошибки, и она работает при первом щелчке, но обратите внимание, что все события щелчка по клонированному содержимому не будут работать из-за того, что новые элементы не привязаны к событию щелчка. Итак, вы могли бы попробовать с $('.row').on('click','[id^="addField"]',() => {})

3. @SimoneRossaini $('[id^="addField"]') означает «выбрать любой элемент, который имеет атрибут ‘id’, начинающийся с ‘addField’

4. Нет, это «начинается с addField». Для этого я использовал знак карата.

5. @DevsiOdedra событие щелчка запускается всеми id , начиная с addField . Его код правильный

Ответ №1:

Обратите внимание, что вы использовали функцию arrow, из-за которой this ссылаются на window .

Для этого есть два решения :

1. Использование event.target функции стрелки для получения целевого элемента.

 $('[id^="addField"]').click((event) => {
    let containerDiv = $(event.target).parent();
    console.log(containerDiv.attr('id'));
    containerDiv.after(containerDiv.clone()); 
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="projection" >
    <select class="form-control" aria-placeholder="Select field"></select>
    <button type="button" class="btn btn-light" id="addField_1" name="mybutton"> </button>
</div>

2. Не использовать функцию со стрелкой, а анонимную функцию и использовать this :

 $('[id^="addField"]').click(function() {
    let containerDiv = $(this).parent();
    console.log(containerDiv.attr('id'));
    containerDiv.after(containerDiv.clone()); 
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="projection" >
    <select class="form-control" aria-placeholder="Select field"></select>
    <button type="button" class="btn btn-light" id="addField_1" name="mybutton"> </button>
</div>

Ответ №2:

С помощью этого ключевого слова вы будете ссылаться на объект Window .

Вот почему вы должны использовать что-то подобное:

 $('[id^="addField"]').on('click', event =>  {
  const parentDiv = $(event.target).closest('.row');
  console.log(parentDiv.html());
});