jQuery函数.on()不能与“click”事件一起使用。

Question

jQuery函数.on()不能与“click”事件一起使用。

javascriptjquerydynamics-crm-2013

4

我正在使用 MS Dynamics CRM 2013，当我想要为导航窗格中的“文档”按钮添加事件处理程序时，遇到了问题。

输入图片说明

jQuery 函数 .on() 在 “click” 事件上不起作用。它在 “mouseover” 或 “mouseup” 事件上可以正常工作，但是在 “click” 上不起作用。以下是我正在使用的代码:

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

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

请帮我解决这个问题。提前感谢！

编辑

以下是我要处理的HTML代码：

在用户打开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>

用户刚刚在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>

- Ihor Sharapov

1

Node_navDocument是crmMasthead的子元素吗？如果不是，请将crmMasthead替换为document/相应的父元素。 - Kiran

为什么不使用click()？ $("#crmMasthead").click(..) - Tigran

1

如果它能够使用 mouseup 正常工作，为什么不使用它呢？如果其他事件可以正常工作，那么可能有某些东西阻止了 click 事件。 - adeneo

5

请发布您的HTML代码。 - OneChillDude

1

你为什么在CRM 2013中使用不支持的自定义功能？添加此事件的目的是什么？ - Guido Preite

显示剩余10条评论

3个回答

2

尝试

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

或者

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

- jolsalazar

关于第一个：不幸的是，它不能与“click”事件一起使用，但它可以与“mouseover”和其他事件一起使用。关于第二个：在导航窗格出现之前，表单上下文中不存在#Node_navDocument。 - Ihor Sharapov

这对我解决了另一个绑定问题，还需要添加function(e){e.preventDefault();}以使其正常工作。 - Alexander Nicholas Popa

-1

委托，如此处所解释的那样，是正确的方式，你做得很好。

正如您在演示中看到的那样，其中通过按钮模拟第二个div的加载，您的代码可以正常工作。

顺便说一下，也许您已经这样做了：

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

如果您使用append，在单击"#Node_navDocument"时，可能会再次调用上面的代码，而不是：

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

编辑

尝试检查元素的z-index。也许你的div下面还有其他东西。
这个演示或许可以帮到你。

编辑2 发布后的HTML

请注意，您正在绑定单击标签（具有id Node_navDocument）。顺便说一下，确保您没有在单击事件上放置任何preventDefault()！

- SirDeveloper

很遗憾，我没有使用append。当用户打开导航窗格后（这里是内部CRM 2013逻辑），#Node_navDocument会出现在上下文中，就像我在截图中提到的那样，除了“click”之外的其他事件处理程序都可以正常工作。 - Ihor Sharapov

"appears"。也许如果您发布一些HTML以了解div层次结构，我们可以帮助您。顺便说一句，请检查并编辑。 - SirDeveloper

我刚刚在问题中发布了HTML，请看一下。 - Ihor Sharapov

我不知道，不是我。 - Ihor Sharapov

但我仍然对解决这个问题很感兴趣。不幸的是，你的编辑并没有帮助到我。 - Ihor Sharapov

我现在正在查看HTML... 你试过从A标签中删除 "unselectable =" on" "吗？ (: - SirDeveloper

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ihor Sharapov · Accepted Answer

很遗憾，因为#Node_navDocument元素的click事件已经绑定到另一个使用event.stopImmediatePropagation()的系统函数上，所以在我的情况下，函数.on()不能与click事件一起使用，所有自定义逻辑都不会在此之后执行。

但是，还有另一种方法...

实现click事件的自定义逻辑的主要目标是在此事件之后显示具有不同src链接的系统iframe。为了解决这个问题，我们需要做下面的事情：

enter image description here

创建某些静态元素（1）的处理程序，应该将元素（2）的onclick事件绑定到它上面；
为观察是否存在iframe而在元素（2）上创建onclick事件的监听器。

元素（1）的ID为#TabNode_tab0Tab，元素（2）的ID为#Node_navDocument，iframe的ID为#areaDocumentFrame。

以下是代码：

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