jQuery function .on() doesn't work with "click" event

Question 1

Unfortunately, function .on() doesn't work with click event in my case because of event click of the #Node_navDocument element has already bound to another system function which uses event.stopImmediatePropagation() and all custom logic doesn't execute after this.

But, there is another way...

Main goal of implementing custom logic for click event was displaying system iframe with different src link after this event. So, to resolve this task we need to do next:

enter image description here

create handler for some static element (1) that should bound onclick event of element (2);
create listener on onclick event of element (2) for watching if iframe exists or not.

Element (1) has id #TabNode_tab0Tab, element (2) - #Node_navDocument and iframe - #areaDocumentFrame.

Here is the code:

replaceDocumentsLink: function () {
    console.log("Function was started!");
    var listener = {};

    window.top.$("#TabNode_tab0Tab").on("mouseover", function () {
        if (window.top.$('#Node_navDocument').length)
            window.top.$('#Node_navDocument')[0].onclick = function () {
                listener = setInterval(function () {
                    if ($("#areaDocumentFrame").length) {
                        console.log("Frame was found!")
                        $("#areaDocumentFrame").attr("src", "http://www.microsoft.com/");                            
                        clearInterval(listener)
                    }
                    else
                        console.log("Frame was not found!")
                }, 250);
            }
    });

Question 2

Try

jQuery(document).on('click', '#Node_navDocument', function() {
    alert("Success!");
});

Or

jQuery('#Node_navDocument').click(function() {
    alert("Success!");
});

Question 3

Delegation, as explained here, is the way, and you are doing well.

As you can see in this demo, where the load of second div is simulated with a button, your code works.

By the way, maybe you have done like:

    $("#crmMasthead").on('click', function() {
       $(this).append("<div id=\"Node_navDocument\"> B </div>");
    });

If you use append, when you click on "#Node_navDocument", probably is called again code above and not:

   $("#crmMasthead").on('click', "#Node_navDocument", function() {
          .......
   });

edit

Try to check z-index of the element. Maybe you have something else above your div.
This other demo maybe can help you.

edit 2 after post html

Note that you are binding click on a tag (with id Node_navDocument). By the way, be sure you have not put any preventDefault() on click event!