在 <a>C# MVC 中的 ajax jquery 中创建 Link() 时不调用 Click 事件

Question

我在HTML剃刀中有以下链接：

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

下一个脚本

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

所有在INDEX.HTML中，它运行良好

我必须使用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> ");
}
});

这显示了新的链接，但不调用.bt打开函数。我不知道使用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处理程序。