jquery - 当jquery分配给innerHtml时会触发什么事件

Question

我有以下代码，当我单击 navMenu 中的链接时，它会将一些 html(包括 anchor )加载到 div 中。当我单步执行它时，<p>'s是隐藏的，但当页面最终出现时它们并没有隐藏。页面显示后，contentClickFunction隐藏/显示<p>'s正如预期的那样。

我相信我需要类似“准备好”的东西，但要分配给innerHtml。是否有一个我可以监听的事件，以便我对隐藏的调用不会被覆盖？

我知道我可以通过添加 css 设置来实现我的目标 #content li>p { display:none; }但我想了解发生了什么。

$(document).ready(function(){
    $("#content").on("click", "li>a", contentClickFunction);
    $("#navMenu a").click(function(event){
        var href = $(this).attr("href");
        event.preventDefault();
        $.get( href , function(data){
            $("#content").html(data);
        });
        $("#content li > p").hide();
    });
  });

Answer 1

DOM ready 仅触发一次。

您可以使用mutation events (DOMNodeInserted)，但它们已被弃用。

您还可以创建自定义事件:

function handler(){
    // Do stuff
}

$('#content').on('insert', handler);

$.get( href , function(data){
    $("#content").html(data).trigger('insert');
});

最后一个选项似乎最适合您。