Question

我正在尝试将pnoty jquery库用于我自己的目的。当用户将鼠标悬停在术语上时，我会从xml文件中检索术语名称和描述，并在工具提示中显示它们。我能够成功检索术语数据，但是我将它们转移到jquery函数时遇到了问题（我总是在jquery中得到空值）。我认为在加载页面时会加载jquery，因此将字段设置为空。

正如您在下面的href代码中看到的，我有自己的名为DisplayAlert的函数，它可以很好地工作，并将与术语相关的值加载到术语名称和定义 div 标记中。

<a href="#" onmouseover="javascript:DisplayAlert('qrCode');tooltip.pnotify_display();" onmousemove="tooltip.css({'top': event.clientY+12, 'left': event.clientX+12});" onmouseout="tooltip.pnotify_remove();">EWOM</a>

然后，在上面的一个href中调用tooltip.pnotify_display（）fn，我调用jquery函数，如下所示。问题是$（“＃term”）。text（）和$（“＃definition”）。text（）总是返回空值。

       <script type="text/javascript">              
            var permanotice, tooltip, _alert;
            $(function(){                   
                //$.pnotify.defaults.styling = "bootstrap3";            
                // This notice is used as a tooltip.
                var make_tooltip = function(){
                    alert(document.getElementById("term").innerHTML);//alert("test1");
                    tooltip = $.pnotify({
                        title: $("#term").text(),
                        text: $("#definition").text(),
                        hide: false,
                        closer: false,
                        sticker: false,
                        history: false,
                        animate_speed: 100,
                        opacity: 1,
                        icon: "ui-icon ui-icon-comment",
                        // Setting stack to false causes PNotify to ignore this notice when positioning.
                        stack: false,
                        after_init: function(pnotify){
                            // Remove the notice if the user mouses over it.

                            pnotify.mouseout(function(){
                                pnotify.pnotify_remove();
                            });
                        },
                        before_open: function(pnotify){
                            // This prevents the notice from displaying when it's created.
                            pnotify.pnotify({
                                before_open: null
                            });

                            return false;
                        }
                    });
                }
                // I put it in a function so I could show the source easily.
                make_tooltip();         
            }); 

        </script>

我努力工作但却无法理解。有什么建议吗？

Answer 1

为了确保函数按照正确的顺序触发，我建议在你的document.ready函数中绑定hover和mouseout事件，如下所示：

$(function() {
  $("#hoverLink").hover(function() {
    DisplayAlert('qrcode');
    tooltip.pnotify.display();
    //do all your hover stuff here
  }, function() {
    tooltip.pnotify.remove();
    // do all your mouseout stuff here
  }).on("mousemove", function(e) {
    tooltip.css({'top': e.clientY+12, 'left': e.clientX+12});
  });
});

这样的事情。我认为这样可以更清楚地将您的逻辑从渲染中分离出来，并使测试和调试变得更容易（您可以执行控制台日志和操作以确切了解正在发生的事情）

jquery在mouseover事件上接收空值（来自div标签）

1 个答案: