如何利用JQuery的“ .on（）”方法處理非本地jquery元素？

Question

我最近在這里發布了一個問題，告訴我使用.on()將元素附加到動態創建的對象上。 我在將其實現到腳本中時遇到一個問題，因為我使用的是EasyUI中的元素：

$(".item").draggable({ ... });
而且我不太確定如何修改它以使用.on() 。 我嘗試了以下方法： $('body').on('draggable', '.item', function() { ... }); （給我一個錯誤:是意外令牌（代碼行是revert:true, ））。

和：
$('body').on('draggable', '.item', draggable({ ... })); 但這表示未定義draggable 。

抱歉，如果這真的很簡單，那就太麻煩了：P

謝謝你的幫助

Answer 1

draggable不是事件，因此您無法為其附加事件處理程序。 這是一個jQuery插件方法，在元素存在之前您不能在元素上調用它。

如果要動態創建元素，則需要將初始化插件的代碼放入創建元素的代碼中。 因此，它看起來像：

newElement = $("<div>", { "class": "item" }).draggable({...}).appendTo(something);

使用.load ，可以將小部件附加在回調函數中。

$("#shop").load("showcontent/cat1.html", function() {
    $(this).find(".item").draggable({ ... });
});

Answer 2

對於第一個問題，看起來revert：true需要是一個對象{revert:true} 。

對於第二個問題，您需要將回調函數傳遞給事件監聽器，可以使用function關鍵字（例如）聲明一個內聯。

$('body').on('draggable', '.item', function draggable({ ... }));

或者你可以傳遞一個匿名函數

$('body').on('draggable', '.item', function({ ... }));

或在其他地方聲明該函數，然后通過引用將其傳遞給事件偵聽器。

function draggable( event ){ ... }
$('body').on('draggable', '.item', draggable));

Answer 3

看起來您正在將元素的名稱與事件的名稱混淆。 您將調用$(".item").draggable({...})來生成可以拖動的新元素。

要監聽元素何時被拖動的事件，您想要列出到onStartDrag ， onDrag或onStopDrag 。 像這樣$('.item').on('onStartDrag', function(event) {...}) 。

在此處查看完整的文檔： http : //www.jeasyui.com/documentation/index.php