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

4
votes

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,

enter image description here

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>
3
javascriptjquerydynamics-crm-2013
Is Node_navDocument is child of crmMasthead? If not replace crmMasthead with document/respective parent element. – Unknown
Why not to use click() ? $("#crmMasthead").click(..) – Tigran
If it works with mouseup, why not use that instead ? Something is probably blocking click events if other events are working. – adeneo
Please post your HTML – OneChillDude
Why are you using unsupported customization in CRM 2013? Which is the purpose of adding this event? – Guido Preite

3 Answers

3
votes

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

Try

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

Or

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

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!