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

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

从 jQuery 1.7 开始，.live() 方法已被弃用。使用 .on() 来
附加事件处理程序。旧版本 jQuery 的用户应该使用
.delegate() 优先于 .live()。