Question

我使用JNotify-plugin在我的网站上显示通知。我运作良好，但我需要使用点击功能来触发某些事件。

基本上会发生什么：

当我收到新的聊天消息时，我的JNotify函数会触发并显示notification-div。然后，当我单击该div时，我想触发我的其他功能（＃showNewMsg-click-function）。但它不会起作用。如果我使用任何其他div来触发＃showNewMsg-click-function，一切正常。但是在单击JNotify呈现的div时则不行。那么怎样才能使这个工作？

这是我的尝试...

JNotify-功用：

var newMessage;
        $(function () {
            newMessage = function () {
                jSuccess(
                    "<div id='showNewMsg'><i class='glyphicon glyphicon-envelope'></i>" + ' New chat msg! Click to read!' + '</div>',
                    {
                        autoHide: false,
                        HideTimeEffect: 500,
                        LongTrip: 20,
                        ColorOverlay: '#000',
                        HorizontalPosition: "center",
                        VerticalPosition: "bottom",
                        ShowOverlay: false,
                        OpacityOverlay: 0.5,
                        MinWidth: 350
                    });
            }
            newMessage();
        });

Click-funtion触发其他一些点击事件：

$("#showNewMsg").click(function () {

        $("#chat-toggle").click();

        $('a[href="#room1"]').click();
    });

JNotify GitHub

Answer 1

回答我自己的问题，万一其他人想知道。

通过阅读JNotify文档，找到答案。

通过添加onClosed-part，而不是尝试使用click-events执行单独的功能，现在一切都很完美。

通知div关闭时的onClosed fire。

var newMessage;
        $(function () {
            newMessage = function () {
                jSuccess(
                    "<div id='showNewMsg'><i class='glyphicon glyphicon-envelope'></i>" + ' New chat msg! Click to read!' + '</div>',
                    {
                        autoHide: false,
                        HideTimeEffect: 500,
                        LongTrip: 20,
                        ColorOverlay: '#000',
                        HorizontalPosition: "center",
                        VerticalPosition: "bottom",
                        ShowOverlay: false,
                        OpacityOverlay: 0.5,
                        MinWidth: 350,
                        //THIS PART BELOW
                        onClosed: function () {
                            $("#chat-toggle").click();

                            $('a[href="#room1"]').click();
                        },
                    });
            }
            newMessage();
        });

Answer 2

由于通知DIV正在动态插入到DOM中，因此它永远不会受到您设置的点击的约束。尝试在jNotify的onCompleted函数中绑定click。插入元素后会触发此函数，因此您应该可以对其进行操作。

jSuccess(
  "<div id='showNewMsg'><i class='glyphicon glyphicon-envelope'></i>" + ' New chat msg! Click to read!' + '</div>',
  {
    autoHide: false,
    HideTimeEffect: 500,
    LongTrip: 20,
    ColorOverlay: '#000',
    HorizontalPosition: "center",
    VerticalPosition: "bottom",
    ShowOverlay: false,
    OpacityOverlay: 0.5,
    MinWidth: 350,
    onCompleted : function() {
      $("#showNewMsg").click(function () {
        alert('You clicked on the notification!');
      });
    }
  }
);

jsFiddle here.

JQuery - JNotify - 点击功能问题

2 个答案: