2013-05-22 167 views
3

這是我的代碼。我添加了一些類並刪除了它的一些功能。 CSS代表的設計很好,但是當我想使用我已經添加到這個函數的類時,jQuery並沒有那樣做。我怎樣才能使用這些功能的實時或'on'功能?我如何訪問這些類以再次在droppable函數中使用它們?jQuery live可拖拽/ live 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'); 
    } 
}); 

回答

4

就我所知,不能以與委派事件處理程序相同的方式委託插件。選擇器選擇在執行時匹配的元素,然後運行插件代碼以對這些元素進行任何初始化。任何在稍後的點匹配選擇器的新元素將不會被調用它們的初始化代碼。

您需要再次調用插件函數。像這樣的東西應該工作:

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); 
+0

非常感謝哥哥..:d 現在它的工作... –

-2

或者你可以使用一個插件叫做的liveQuery(https://github.com/brandonaaron/livequery),並調用dragable功能。

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

從它看起來像*的文件將*是一種選擇,以實現他們的目標,但這個例子中你」因爲這與事件處理程序無關(另外,爲什麼不只是使用'.on()'?),所發佈的內容並不相關。 –

+0

Jeah,這只是頁面中的例子!所以,這就是爲什麼我寫了Example ...... – elasticman

+1

寫作「Example」並沒有使它更具有相關性。插件*的使用不會解決他們的問題*。我懷疑這是爲什麼你收到了一個倒退。 –