jQuery Selectable Events

Question

J'ai un plugin jQuery qui déplace et dépose des éléments dans différents conteneurs, je veux attacher certains événements, par exemple quand un élément est sur un conteneur. Ces événements fonctionnaient parfaitement mais ensuite ils ont cessé de fonctionner. Pour une raison quelconque, les événements spécifiques Sélectionnables ne sont pas déclenchés, mais lorsque je lie un clic, cela fonctionne par exemple.

Exemple:

//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"); 
}); 

Le code est lié:

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

Merci beaucoup

Answer 1

Si vous avez récemment mis à jour jQuery 1.7+ vous devriez remarquer que la méthode live() est dépréciée .

À partir de jQuery 1.7, la méthode .live() est déconseillée. Utilisez .on() pour attacher des gestionnaires d'événements. Les utilisateurs des anciennes versions de jQuery doivent utiliser .delegate() au lieu de .live().