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;
}