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

【问题标题】：How can I utilize JQuery's ".on()" method to work with non-native jquery elements?如何利用 JQuery 的“.on()”方法来处理非本地 jquery 元素？
【发布时间】：2015-12-31 20:04:41
【问题描述】：

我最近发布了一个问题here，告诉我使用.on() 将元素附加到动态创建的对象。我只是在我的脚本中实现它时遇到了问题，因为我使用了来自 EasyUI 的元素：

$(".item").draggable({ ... });
而且我不太确定如何修改它以使用.on()。我尝试了以下方法： $('body').on('draggable', '.item', function() { ... });（给我一个错误，: 是一个意外的令牌（代码行是 revert:true,））。

并且：
$('body').on('draggable', '.item', draggable({ ... })); 但这表示 draggable 未定义。

对不起，如果这真的很容易，这一切都让我有点过头了：P

感谢您的帮助

【问题讨论】：

这不是事件处理程序，因为draggable 不是事件。这是一个小部件。
对不起，我编辑了标题。
什么是“非原生 jquery 元素”？您的问题是关于如何在动态创建的元素上运行插件。没有什么是非本地的。
我的意思是draggable 不是jquery 本身的，它需要easyui 插件。我不知道如何将draggable 与on 一起使用，因为与普通的js/jq 函数相比，它使用不同的语法，例如click.
与函数是否原生jQuery无关。您也不能将.on 与.each 一起使用，即使它是jQuery 原生的。

标签： javascript jquery jquery-easyui

【解决方案1】：

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

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

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

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

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

【讨论】：

我明白了，谢谢。我使用外部 html 文件创建元素，并使用 $("#shop").load("shopcontent/cat1.html"); 加载它。我如何将draggable 附加到此？
将其添加到答案中
谢谢！除了可拖动功能不起作用之外，这可以正常工作，当我尝试拖动时，它只是拖动图片或a 标签，就好像draggable 没有被初始化一样。让我知道您是否需要源代码以便您查看？
从cat1.html加载的内容是否包含class="item"元素？
jQuery Easy UI 网站上有一个论坛。也许那里的人可以提供帮助，因为这似乎是特定于该库的。

【解决方案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));

【讨论】：

问题是revert:true和proxy:'clone'对于EasyUI拥有的draggable元素至关重要。这是我的全部功能：pastebin.com/vyA95n0t。这在我不使用on 函数时有效，但我需要实现on，因为我正在动态创建元素，而不是我没有使用的时候。

【解决方案3】：

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

要监听元素被拖动的事件，您希望列出onStartDrag、onDrag 或onStopDrag。喜欢这个$('.item').on('onStartDrag', function(event) {...})。

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

【讨论】：

我编辑了标题/文本以表明我的意思是 draggable 元素，而不是事件处理程序。不过谢谢！
@davidpox 当您调用on() 时，您实际上是在尝试注册一个事件处理程序。所以你必须给它一个事件。当你想创建一个元素时，你必须调用draggable() 而不是on()。