Question

这是我的代码。我添加了一些类并删除了它的一些功能。 CSS代表了设计，但是当我想使用我已经添加到这个函数中的类时，jQuery没有得到它。如何使用实时或'on'功能？如何访问这些类以再次在droppable函数中使用它们？

$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        $(this).removeClass('droppable');
        $(this).removeClass('ui-droppable');

        var dragIMG = '<img class="dragBox ui-draggable" data-type="'+img+'" src="img/'+img+'.jpg" alt="" style="position: relative;"/>';
        $(this).append(dragIMG);
        $('#box'+box).empty();
        $('#box'+box).addClass('droppable');
        $('#box'+box).addClass('ui-droppable');
    }
});

Answer 1

据我所知，你不能以与委派事件处理程序相同的方式委托插件。选择器选择在执行时匹配的元素，然后运行插件代码以执行对这些元素进行的任何初始化。任何在以后与选择器匹配的新元素都不会在它们上面调用初始化代码。

您需要再次调用插件功能。这样的事情应该有效：

var droppableOptions = {
    drop: function (event, ui) {
        $(this).removeClass('droppable');
        $(this).removeClass('ui-droppable');

        var dragIMG = '<img class="dragBox ui-draggable" data-type="' + img + '" src="img/' + img + '.jpg" alt="" style="position: relative;"/>';
        $(this).append(dragIMG);
        $('#box' + box).empty().addClass('droppable').addClass('ui-droppable').droppable(droppableOptions);
    }
}

$('.droppable').droppable(droppableOptions);

Answer 2

或者您可以使用名为livequery（https://github.com/brandonaaron/livequery）的插件并调用可拖动功能。

实施例

$('a') 
.livequery('click', function(event) { 
    alert('clicked'); 
    return false; 
});

jQuery live draggable / live droppable？

2 个答案: