передача значений из HTML в JQuery после редактирования

Question

У меня есть форма modal, и после ее редактирования я хочу передать значения от fields до jquery.Однако я не уверен, почему это не работает, потому что alert показывает пустым.Вместо значений в поле.

html

    <!-- Modal for edit_lesson_plans-->
                <div class="modal-header">
                    <h4 class="modal-title">Edit Lesson Plan</h4>
                    <button type="button" class="close modal-close" data-dismiss="modal"><i
                            class="fas fa-times"></i>
                    </button>
                </div>
                <form class="lesson-update-section" action="{% url 'home' %}" method="post">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="form-row align-center was-validated">
                            <!-- New Lesson Plans -->
                            <div class="form-group col-lg-6">{{ edited_lp.level }}</div>
                            <div class="form-group col-lg-6">{{ edited_lp.lesson }}</div>
                            <div class="form-group col-lg-12">{{ edited_lp.description }}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="update_lesson_plan" class="btn btn-success"
                                name="update_lesson_plan">Submit
                        </button>
                        <button type="submit" id="delete_lesson_plan" class="btn btn-danger"
                                name="delete_lesson_plan">Delete
                        </button>
                    </div>
                </form>

edited_lp генерируется динамически

Это копияhtml, который генерируется.

<input type="number" name="level" class="form-control" id="id_level" placeholder="Lesson level number" required="">
<input type="text" name="lesson" class="form-control" id="id_lesson" placeholder="Lesson name" required="">
<textarea name="description" cols="40" rows="3" class="form-control" id="id_description" placeholder="Lesson description"></textarea>

jquery

$(document).on('show.bs.modal', '#edit-lesson-plan-modal', function () {

    modal.find('.modal-footer #update_lesson_plan').off().on().click(function () {
        // I have tried the below as a test:
        alert($("#id_level").val());
    });
});

Как мне ссылаться на fields после редактирования, чтобы я могпередать значения на JQuery успешно ??

Может ли быть так, что он не распознает, что вообще существует id_level ..?

Answer 1

Возможно, из-за динамически генерируемых элементов, которые загружаются после document.ready, поэтому лучший способ - дать ссылку на ближайшего родителя, который существовал на момент загрузки страницы.

Например.

Div1
  div2
      div.dynamic

Теперь, если вы попытаетесь получить значение или текст непосредственно из div.dynamic, вы получите ноль, поэтому вы должны ссылаться на $('.div2').find('div.dynamic').html()

Answer 2

Рабочая скрипка .

Основная проблема связана с событием click, мы не должны вызывать on()/off() без передачи параметров, это должно быть похоже на:

modal.find('.modal-footer #update_lesson_plan').off('click').on('click',function(e) {
  e.preventDefault();

  alert($("#id_level").val());
});