Question

我正在使用graphdracula绘制图表。图表是在事件中动态创建的。

enter image description here

上面的快照显示了svg标记内动态添加的div。创建的每个椭圆都有id。

我正在尝试将ID player-1和player-2与事件绑定。

$('#player-1').mouseover(function(event) {
                var parentOffset = $(this).offset();
                x1 = event.pageX - parentOffset.left;
                y1 = event.pageY - parentOffset.top;
                console.log("For player-1 : " + x1 + ',' + y1);
            });

            $('#player-2').mouseover(function(event) {
                var parentOffset = $(this).offset();
                x1 = event.pageX - parentOffset.left;
                y1 = event.pageY - parentOffset.top;
                console.log("For player-2 : " + x1 + ',' + y1);
            });

但事件并未触发。这可能是什么原因？我已经使用click事件进行了检查，但它没有被触发。这可能是什么原因？

在以下代码段中，向文档添加图表：

$('#cont').click(function(event) { 
                var width = $('#cont').width() - 1;
                var height = $('#cont').height() - 1;
                g = new Graph();
                g.addNode("player-1");
                g.addNode("player-2");
                //g.addNode("player-2");
                g.addEdge("player-1", "player-2",  {"directed":true});
                var layouter = new Graph.Layout.Spring(g);

                 /* draw the graph using the RaphaelJS draw implementation */
                var renderer = new Graph.Renderer.Raphael('cont', g, width, height);

                var redraw = function() {
                    layouter.layout();
                    renderer.draw();
                };
                hide = function(id) {
                    g.nodes[id].hide();
                };
                show = function(id) {
                    g.nodes[id].show();
                };
 });

Answer 1

最好使用on()和off()，因为这样可以避免多个事件处理程序注册，请参阅https://api.jquery.com/on/和https://api.jquery.com/off/

不幸的是我发现了这一点：＆＃34;注意：委派的事件对SVG不起作用。＆＃34; 所以基本上你必须在将SVG添加到DOM之后注册你的事件处理程序。

Answer 2

如果您的播放器是动态添加的，您可能需要使用附加到不变的祖先元素的委托事件处理程序：

$('#cont').on("mouseover", '#player-1', function(event) {
            var parentOffset = $(this).offset();
            x1 = event.pageX - parentOffset.left;
            y1 = event.pageY - parentOffset.top;
            console.log("For player-1 : " + x1 + ',' + y1);
        });

$('#cont').on("mouseover", '#player-2', function(event) {
            var parentOffset = $(this).offset();
            x1 = event.pageX - parentOffset.left;
            y1 = event.pageY - parentOffset.top;
            console.log("For player-2 : " + x1 + ',' + y1);
        });

这假设id="cont"是永久元素（似乎在您的代码中）。然后，这将侦听事件（mouseover）冒泡到祖先，然后应用jQuery选择器，然后将函数应用于导致的匹配元素事件。

结果是他们将回应仅在事件发生时存在的元素（而不仅仅是事件注册时间）。

Answer 3

在第一个函数中初始化第二个函数（事件监听器）：

$('#cont').click(function(event) { 
    //current code is here 
    //then trigger second function:
     secondFunction()
 });

第二功能：

function secondFunction(){
 $('#player-1').on("mouseenter",function(event) {
  var parentOffset = $(this).offset();
  x1 = event.pageX - parentOffset.left;
  y1 = event.pageY - parentOffset.top;
  console.log("For player-1 : " + x1 + ',' + y1);
 });

 $('#player-2').on("mouseenter",function(event) {
   var parentOffset = $(this).offset();
   x1 = event.pageX - parentOffset.left;
   y1 = event.pageY - parentOffset.top;
   console.log("For player-2 : " + x1 + ',' + y1);
   });
}

为什么事件不会被触发？

3 个答案: