为什么事件没有被触发？

Question

我正在使用graphdracula来绘制一个图表。图是在事件发生时动态创建的。

​

​

上面的快照显示了在div标记内动态添加的svg。创建的每个椭圆都有一个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/

不幸的是，我发现：“注意:委托事件不适用于SVG。”因此，基本上您必须在将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"是一个永久元素(似乎在您的代码中)。这将侦听事件(鼠标悬停)以冒泡到祖先，然后应用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);
   });
}