jQuery에서 예측할 수없는 마우스 오버 동작

Question

jQuery draggables/droppables를 live() mouseover 이벤트에 바인딩했습니다. load()를 사용하여 페이지를로드하고로드 후에 액세스 할 수있는 요소가 필요하기 때문에 live를 사용하고 있습니다. Firefox 및 Safari에서 처음 페이지를로드 할 때 일부만 삭제할 수있는 영역이 작동하는 이상한 동작이 나타납니다. 그러나 draggable div를 놓고 다시 선택하면 마술처럼 다시 일합니다. 이상한 위치에서 드래그 div를 드래그하면 가끔씩 작동합니다. 또한 초기로드시 모든 삭제 가능 영역이 작동하지만 일부는 초기에 "터치"한 후에 만 ​​작동합니다. 이러한 초기 활성화 접촉은 종종 div 바로 위에 있지 않지만 때로는 브라우저 측면에 있습니다.

$(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); 
    }); 

그런 다음 링크 된 JS 파일 :

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

나는 #의 JQuery와 - UI에 도움이 사람들에 문제 덕분에 발견 어쨌든, 여기 내 코드입니다.

이상한 동작을 설명하면서 마우스 오버시에만 이벤트가 바인딩되는 것이 문제입니다.