Почему в поле ввода динамически добавленных представлений не удалось прикрепить событие jQuery к основному представлению

Question

Динамическое добавление частичных представлений в основной вид при нажатии кнопки, как показано ниже, при вводе динамически загруженных представлений не удалось прикрепить jQuery к основному представлению, но они прекрасно работают с частичными представлениями.

Главный вид

 <input type="button" name="BtnAddNew" value="Add New" onclick="AddCustomer();" />

    <script>
        function AddCustomer() {
            $.get("DataEntryScreen").done(function (r) {
                $('#DivDatEntry').html(r);
            });
        }

        $('#btnCancel').click(function (e) {//not work on main view
            alert();
            $('#DivDatEntry').html("");
        });

    </script>

Частичное представление = DataEntryScreen.cshtml

@{
    AjaxOptions o = new AjaxOptions();
    o.OnSuccess = "OnSaveSuccess";
}
@using (Ajax.BeginForm("SaveCustomer", "SPA", o))
{
    <table>
        <tr>
            <td>Customer Name:</td>
            <td><input type="text" name="CustomerName" value="" /></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input type="text" name="Address" value="" /></td>
        </tr>
        <tr>
            <td>Age:</td>
            <td><input type="text" name="Age" value="" /></td>
        </tr>
        <tr>
            <td colspan="3" align="right">
                <input type="submit" name="name" value="Save" />
                <input type="button" name="name" value="Reset" />
                <input id="btnCancel" type="button" name="name" value="Cancel" />
            </td>
        </tr>
    </table>
}

Теперь динамически загружаемое частичное представление = " DataEntryScreen.cshtml " button = " btnCancel " присоединение события jQuery к основному представлению не работает, поэтому написание того же синтаксиса jQuery на соответствующем частичном представлении работает отлично.

<script>


    $('#btnCancel').click(function (e) {//perfectly work on partial view.
        alert();
        $('#DivDatEntry').html("");
    });

</script>

Почему вложение основного события jQuery не работает на главном экране?

Answer 1

Это не работает, потому что вы пытаетесь присоединить слушатель события к элементу, который еще не существует в DOM, во время вызова функции jQuery.

Пошаговое объяснение:

В главном представлении при оценке тега скрипта вызывается функция $('#btnCancel'), которая не находит элемент #btnCancel на странице - потому что он еще не существует. Этот элемент добавляется на страницу только после асинхронной выборки при вызове AddCustomer().

Итак, функция $ возвращает пустой список [].

Поскольку jQuery ничего не находит, функция .click(), которая вызывается впоследствии, работает с пустым списком и не присоединяет ваш прослушиватель событий.

Почему это работает, когда вы перемещаете код в частичное:

Когда вы перемещаете вызов функции $('#btnCancel') в частичное представление, порядок вызовов функций изменяется. Сначала необходимо выполнить асинхронную выборку части, затем добавить ответ в DOM, затем вычисляется тег сценария и, наконец, вызывается функция $('#btnCancel'), которая, в свою очередь, находит элемент #btnCancel в DOM и передает результат в .click() функция, которая присоединяет ваш слушатель событий.

Возможное решение:

Можно отложить создание новых прослушивателей событий до тех пор, пока асинхронно извлеченные элементы не будут добавлены в DOM.

Для этого вы можете изменить функцию AddCustomer.

На главном экране:

function AddCustomer() {
  $.get("DataEntryScreen").done(function (r) {
    $('#DivDatEntry').html(r).find('#btnCancel').click(function (e) {
      alert();
      $('#DivDatEntry').html("");
    });
  });
}

Answer 2

Обычно я исправляю эту проблему, используя делегирование событий в главном представлении:

<script>
    $('body').on('click', '#btnCancel', function (e) {
        alert();
        $('#DivDatEntry').html("");
    });
</script>