Draggable elements not responding to 'hover'

StackOverflow https://stackoverflow.com/questions/23231480

  •  07-07-2023
  •  | 
  •  

Вопрос

It's probably in the best interest of your time to take a quick look at my fiddle first: http://jsfiddle.net/z6Bae/1/ (Press the 'Add Hotspot' button a couple of times and try "hovering on" the hotspots, which can also be dragged)

Lines 12 through 14 in the javascript section has the following hover method:

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

And quite simply, I have one or more <div> elements with the class ui-widget-content within a parent <div id="canvas">. Everything works as intended, but I couldn't figure out why the seemingly straightforward hover method for those div elements isn't being invoked.

While I think it's rather redundant, below is my code for those who want to see it here (I won't list the styling here):

(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;
}
Это было полезно?

Решение

You should unbind listener on hover and bind back hover listener after adding new staff:

$(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

Другие советы

Check the updated fiddle here

replace your following code

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

with the one below

 $("#canvas").on('mouseenter' , ".ui-widget-content" , function(){
    alert('hi');
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top