Событие Click не вызывается при создании ссылки (<a>) в jjery ajax в C # MVC

Question

У меня есть следующая ССЫЛКА в бритве HTML:

<a class="btnOpen" data-id="@item.Id">
   Link
</a>

И следующий сценарий

$('.btnOpen').click(function () {
    alert("The Link was clicked");
});

Все в INDEX.HTML, он отлично работает

Iнеобходимо изменить представление с помощью AJAX и заново создать ссылку со следующим кодом:

$.ajax({
            type: "post",
            url: "/Controller/Action",
            data: jQuery.param({ cod: cod }),
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            success: function (newId) {
                $('body').append(" <a class='btnOpen' data-id='"+newId+"'>     Link </a> ");
            }
        });

Это показывает новую ссылку, но не вызывает функцию .btnOpen.Я не знаю почему и какова область события click при использовании Ajax

Answer 1

Это потому, что $('.btnOpen').click работает на том, что присутствует в body в данный момент, а ваш ответ ajax не находится в теле в это время.Поэтому обработчик событий не зарегистрирован в вашей новой ссылке.

Вместо этого вы должны использовать делегированный обработчик событий из jQuery, чтобы он динамически прослушивал вашу DOM:

$('body').on('click', 'a.btnOpen', function () {
    alert("The Link was clicked");
});

function add() {
  $('#content').append('<a href="#" class="btnOpen">Click me dynamically</a>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
   <a href="#" class="btnOpen">Click me</a>
</div>

<button onclick="add()">Add link</button>

Вы хотите, чтобы событие было привязано к тому, что, как вы знаете, существует и максимально приближено к вашему динамически добавляемому контенту.Так, например, если все они находятся в div, используйте div для создания обработчика .on.