The jQuery .on () function does not work with & ldquo; Click & rdquo; Event

I am working with MS Dynamics CRM 2013 and I am facing with the issue that when I want to add event handler to the button "Documents" in the navigation pane,

jQuery function .on() doesn't work with "click" event. It works fine with "mouseover" or "mouseup" events, but does not work with "click". Here is code, that I'm using:

$("#crmMasthead").on( "click", "#Node_navDocument", function(){ alert("Success!"); } );

Where:
#crmMasthead - static selector;
#Node_navDocument - id of the button "Documents", that I want to reload.

Please help me with this issue. Thank you in advance!

EDIT

Here is html which I am dealing with:

Before user opens navigation pane in CRM 2013:

<body>
...
    <div id="crmMasthead" tabindex="-1">
        <div class="navStatusArea" id="navStatusArea"></div>
        <div class='navBar' id='navBar'>...</div>
        <div class="navBarOverlay" id="navBarOverlay" style="display: none;">     </div>
    </div>
...
</body>

User has just opened navigation pane in CRM 2013:

<body scroll="no">
...
    <div id="crmMasthead" tabindex="-1">
        <div class="navStatusArea" id="navStatusArea"></div>
        <div class='navBar' id='navBar'></div>
Changed:<div class="navBarOverlay" id="navBarOverlay" style="display: block;"></div>
New:    <div class="navActionGroupContainer" style="">
            ...
            <a class="navActionButtonContainer navActionButton     navActionButtonDefault normal " id="Node_navDocument" role="button" title="Documents" href="javascript:;" unselectable="on" style="background-color: #555555">...</a>
            ...
        </div>

    </div>
...
</body>

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:

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

Related Articles