JQuery - JNotify -单击函数问题

Question

我使用JNotify-plugin在我的站点上显示通知。我工作得很好，但我需要使用单击函数来触发一些事件。

最基本的情况是：

当我收到一条新的聊天消息时，我的JNotify函数触发器和一个通知-div就会出现。然后，当我单击那个div时，我想触发我的另一个函数(#showNewMsg- click -函数)。但这行不通。如果我使用任何其他div来触发#showNewMsg-click-函数，一切都很好。但在单击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();
        });

单击-函数以触发其他单击事件：

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

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

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

JNotify GitHub

Answer 1

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

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

通过添加onClosed部分，而不是尝试使用单击事件来执行单独的函数，现在一切都很完美。

当通知div关闭时，onClosed触发。

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中的，所以它永远不会绑定到您设置的单击。尝试将单击绑定到onCompleted函数的jNotify中。此函数在插入元素后触发，因此您应该能够对其进行操作。

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在这里。