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

如果你最近更新到jQuery 1.7+，你应该注意到live()方法已被弃用。

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来附加事件处理程序。旧版jQuery的用户应该使用 .delegate（）优先于.live（）。

jQuery可选事件

1 个答案: