插入的 HTML 不响应 jQuery

Question

每当我使用 ajax 从服务器获取新 HTML，然后使用 jQuery 修改页面上的当前 HTML 时，插入的新 jQuery 不会响应我页面上的 javascript。

例如，当我有这个代码时：

<td id="is_admin_14">
    <i class="fa fa-check-circle success"></i>
    <a class="subtle-link demote-member" href="demote-link"> <small>Demote</small></a>
</td>

<script type='text/javascript'>
$(document).ready(function($) {

  function updateAdminStatus(url) {
    $.post(url, function(data) {
            console.log(data)
            var cell = $('#is_admin_'+data.member_pk);
            cell.html(data.html)
        }).fail(function() {
            // handle unexpected error here
            alert("error");
        });
  }

  $('.promote-member, .demote-member').click(function(event) {
        event.preventDefault();
        updateAdminStatus($(this).attr('href'));
  });

});
</script>

然后我点击 .demote-member 链接，发送 ajax 帖子，返回 html，并使用返回的 html 重新填充表格单元格，如下所示：

<td id="is_admin_14">
    <i class="fa fa-times-circle danger"></i>
    <a onclick="return false;" class="subtle-link promote-studio-member" href="promote-link"><small>Promote</small></a>
</td>

现在，当我单击promote-studio-member 链接时，没有重新加载页面，jQuery 将被完全忽略，它会尝试导航到 href 链接，就像没有提供 jQuery 时一样。我不能在同一页上继续提升和贬低我内心的渴望。 （另请注意，我什至尝试在其中输入 onclick='return false;'，但链接仍然会触发。）

为什么会这样，有什么办法可以让新的html响应jQuery？

Answer 1

试试这个：

$(document).on("click",".promote-member, .demote-member ,.promote-studio-member",function(){
    event.preventDefault();
    updateAdminStatus($(this).attr('href'));
});

由于html是动态添加到DOM中的，所以需要在jQuery中使用Event Delegation来处理

Answer 2

尝试在.promote-member, .demote-member之前添加静态html元素

例如，如果<div id="container"> 是静态元素，则始终添加..

试试这个

$("#container").on("click",".promote-member, .demote-member",function(){

alert("Test");

});