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");

});

插入的HTML不响应jQuery

2 个答案: