jQueryの選択可能なイベント

Question

要素をドラッグして別のコンテナにドロップするjQueryプラグインがあります。例えば、要素がコンテナの上にある場合など、いくつかのイベントをアタッチしたいと思います。これらの出来事は完全に機能していましたが、その後は機能しなくなりました。いくつかの理由で、選択可能な特定のイベントは発生しませんが、たとえば、クリックするとバインドされます。

例：

//these are not working 
$('#sortable2').bind("sortover", function(event, ui) { 
    alert("here"); 
}); 
$('#sortable2').bind('sortreceive', function() { 
     alert('User clicked on "sortable2."'); 
    }); 
$('.droptrue').bind("sortout", function(event, ui) { 
    $(this).css("background", "transparent"); 
}); 

関連するコードは次のとおりです。

var selectedClass = 'ui-state-highlight', 
    clickDelay = 300,  // click time (milliseconds) 
    lastClick, diffClick; // timestamps 

$("ul.droptrue li") 
    // Script to deferentiate a click from a mousedown for drag event 
    .bind('mousedown mouseup', function(e){ 
     if (e.type=="mousedown") { 
      lastClick = e.timeStamp; // get mousedown time 
     } else { 
      diffClick = e.timeStamp - lastClick; 
      if (diffClick < clickDelay) { 
       // add selected class to group draggable objects 
       $(this).toggleClass(selectedClass); 
      } 
     } 
    }) 
    .draggable({ 
     revertDuration: 10, // grouped items animate separately, so leave this number low 
     containment: '.multiSelect', 
     start: function(e, ui) { 
      ui.helper.addClass(selectedClass); 
     }, 
     stop: function(e, ui) { 
      // reset group positions 
      $('.' + selectedClass).css({ top:0, left:0 }); 
     }, 
     drag: function(e, ui) { 
      // set selected group position to main dragged object 
      // this works because the position is relative to the starting position 
      $('.' + selectedClass).css({ 
       top : ui.position.top, 
       left: ui.position.left 
      }); 
     } 
    }); 
$("ul.droptrue") 
    .sortable() 
    .droppable({ 
     drop: function(e, ui) { 
      $('.' + selectedClass) 
      .appendTo($(this)) 
      .add(ui.draggable) // ui.draggable is appended by the script, so add it after 
      .removeClass(selectedClass) 
      .css({ top:0, left:0 }); 
     } 
    }); 

$('#total').text(autoCompleteSourceArray.length); 
$('#filter-count').text(autoCompleteSourceArray.length); 
//Adding Filtering functionality for the lists 
$("#filter").keyup(function() { 
    var filter = $(this).val(), count = 0; 
    $("ul.droptrue:first li").each(function() { 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
      $(this).addClass("hidden"); 
     } else { 
      $(this).removeClass("hidden"); 
      count++; 
     } 
    }); 
    $("#filter-count").text(count); 
}); 

// bind events in order to show or hide the message in the drop zones 
$('ul[id^="sortable"]').live("sortover", function(event, ui) { 
    $(this).css("background", "#f7f6d7"); 
}); 
$('ul[id^="sortable"]').live("sortout", function(event, ui) { 
    $(this).css("background", "transparent"); 
}); 

どうもありがとう

Answer 1

あなたは最近、あなたがlive()法が廃止されていることに気づくべきで1.7以上のjQueryを更新した場合。

jQuery 1.7以降、.live（）メソッドは推奨されていません。イベントハンドラを添付するには、.on（）〜 を使用します。古いバージョンのjQueryを使用する場合は、.live（）より優先して .delegate（）を使用する必要があります。