Question

I have the following code which loads some html (which includes anchors) into a div when I click on a link in navMenu. When I step through it, the <p>'s are hidden, but they are not hidden when the page finally appears. After page is displayed, contentClickFunction hides/shows <p>'s as expected.

I believe I need something like ‘ready’ but for assigning to innerHtml. Is there an event I can listen for so my call to hide is not overridden?

I know I can achieve my goal by adding css setting #content li>p { display:none; } but I want to understand what is going on.

$(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 fires only once.

You can use mutation events (DOMNodeInserted), but they are deprecated.

You can also create a custom event:

function handler(){
    // Do stuff
}

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

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

The last option seems to be the best for you.