Unpredictable mouseover behaviour in jQuery

Question

I am using jQuery draggables/droppables bound to a live() mouseover event. I'm using live because I use load() to load a page, and need those elements accessible after the load. In Firefox and Safari, I'm getting a strange behavior where when I initially load the page, only some of the droppable areas work. But upon letting go of the draggable div, then reselecting it, they magically work again. Dragging the drag div from strange locations sometimes works. Also, upon initial load, all droppable areas will work, but some of them only after initially "touched". These initial activating touches are often not directly over the div, but sometimes way off to the side of the browser. Anyways, here's my code:

$(document).ready(function() {

  // Load main report object
  function reload_report() {
    $('#report').load('{% url timetracker.views.project_report report_id=report_meta.id %}');
  }

  reload_report();

  // Binding dragging events
  $('.worklog-row').live('mouseover', function () {
      drag_worklogs(this);
      return false;
    });

  // Binding dropping events
  $('.dropTarget').live('mouseover', function () {
      drop_worklogs(this, '{% url timetracker.views.move_worklogs report_id=report_meta.id %}', 'drop-hover', reload_report);
    });

Then in the linked JS file:

function drop_worklogs($this, post_url, hover_class, callback) {
  $($this).droppable({
      tolerance: 'pointer',
      hoverClass: hover_class, 
      drop: function(event, ui) {
    // Get ids of dropped worklogs
    var worklogs = [];
    ui.helper.children().each(function() {
        var id = this.id;
        id = id.split('-')[1];
        worklogs.push(id);
        });
    var groupStr = $($this).attr('id');

    var typeStr;

    typeStr = groupStr.split('-')[0];
    groupStr = groupStr.split('-')[1];

    var requestArr = {
      worklogs: worklogs,
      group: groupStr,
      type: typeStr
    };

    var requestData = JSON.stringify(requestArr);
    //alert(requestData);

    // Send to server via POST request
    var success = false;
    $.post(post_url, { move: requestData }, function() {}, "json");
    callback();

      }
      });
}

function drag_worklogs($this) {
  // Drag and drop
  $($this).draggable({
    helper:function() {
      var selected = $('input:checked').parents('tr');
      if (selected.length === 0) {
    selected = $($this);
      }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
      }
      });

Answer 1

I found out the issue thanks to the helpful folks on #jquery-ui.

The issue is that the event is being bound only on mouse over, explaining the erratic behavior.

Answer 2

Hi, I have the similar issue, can you please share with example, how you solved this issue. Thanks in advance