我如何利用 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

对于第一期，看起来 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 2

您似乎混淆了元素名称和事件名称。您将调用 $(".item").draggable({...}) 来生成一个可以拖动的新元素。

要监听元素何时被拖动的事件，您需要列出到 onStartDrag、onDrag 或 onStopDrag。像这样 $('.item').on('onStartDrag', function(event) {...}).

在此处查看完整文档：http://www.jeasyui.com/documentation/index.php

Answer 3

draggable 不是事件，因此您不能将事件处理程序附加到它。这是一个 jQuery 插件方法，在元素存在之前不能在元素上调用它。

如果要动态创建元素，则需要将初始化插件的代码放入创建元素的代码中。所以它看起来像：

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

使用.load时，可以在回调函数中附加widget。

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

我如何利用 JQuery 的“.on()”方法来处理非本地 jquery 元素？

How can I utilize JQuery's ".on()" method to work with non-native jquery elements?

javascript

jquery

jquery-easyui