Question

首先快速浏览一下我的小提琴可能符合您的最佳利益：http://jsfiddle.net/z6Bae/1/ （按“添加热点”按钮几次并尝试“悬停在”热点上，也可以拖动

javascript部分中的第12行到第14行具有以下悬停方法：

$(".ui-widget-content").hover(function () {
    alert('hover!');
});

很简单，我在父<div>中有一个或多个ui-widget-content个元素，其中包含<div id="canvas">个类。一切都按预期工作，但我无法弄清楚为什么没有调用这些div元素看似简单的hover方法。

虽然我认为这是多余的，但下面是我想要在这里看到它的人的代码（我不会在这里列出样式）：

（HTML）

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
    <div id="control">
        <input type="button" id="add" value="Add Hotspot" />
        <div id="output"></div>
    </div>
    <div id="canvas"></div>
    <div id="metadata"></div>
</body>

（JavaScript的）

var _id = 0;
var _jsonStr = '{"hotspots":[]}';
var _jsonObj = JSON.parse(_jsonStr);
var newSpot = false;

$(function () {
    $("#add").on("click", function () {
        newSpot = true;
        addHotspot(_id);
    });

    $(".ui-widget-content").hover(function () {
        alert('hover!'); // Error: I get no alert!
    });
});

function addHotspot(id) {
    $("#canvas").append("<div class='ui-widget-content' id='" + id + "'>" + id + "</div>");
    _bindEvent();
    _id++;
}

function _bindEvent() {
    $(".ui-widget-content").draggable({
        containment: "parent",
        cursor: "move",
        drag: function (event, ui) {
            $(event.target).css("background", "blue");
        },
        stop: function (event, ui) {
            saveCoords(ui.position.left, ui.position.top, ui.helper.attr('id'));
            $(event.target).css("background", "red");
        }
    });
}

function roundUpDecimal(val) {
    return Math.round(val * 10) / 10;
}

function saveCoords(x, y, el, id) {
    var index;
    if (newSpot) {
        index = _jsonObj.hotspots.length;
        _jsonObj.hotspots[index] = {};
    }
    else {
        index = el;
    }
    console.log("el:" + el + ", x:" + x + ", y:" + y);
    _jsonObj.hotspots[index].id = el;
    _jsonObj.hotspots[index].xval = roundUpDecimal(x);
    _jsonObj.hotspots[index].yval = roundUpDecimal(y);

    var len = _jsonObj.hotspots.length;
    var str = "";
    for (var i = 0; i < len; i++) {
        str += "Hotspot[" + i + "]: " + "{ " + _jsonObj.hotspots[i].xval + ", " + _jsonObj.hotspots[i].yval + " }<br/>";
    }
    $("#metadata").html(str);
    newSpot = false;
}

Answer 1

检查更新后的fiddle here

替换以下代码

$(".ui-widget-content").hover(function () {
    alert('hover!'); // Error: I get no alert!
});

下面的那个

 $("#canvas").on('mouseenter' , ".ui-widget-content" , function(){
    alert('hi');
});

Answer 2

你应该在悬停时取消绑定侦听器并在添加新员工后绑定回悬停侦听器：

$(function () {
    $("#add").on("click", function () {
        newSpot = true;
        addHotspot(_id);
        $(".ui-widget-content").unbind("hover");
        $(".ui-widget-content").hover(function () {
            console.log('hover!'); // now you get it! :D
        });
    });


});

Working example

可拖动的元素没有响应＆＃39;悬停＆＃39;

2 个答案: