JQuery可拖动的KeyDown事件不会触发答案

【问题标题】：KeyDown event on JQuery draggable does not triggerJQuery可拖动的KeyDown事件不会触发
【发布时间】：2019-02-28 01:37:14
【问题描述】：

我动态添加可拖动元素，我可以通过放置区删除它们。现在我想增加通过按键删除它们的可能性。我试过这段代码：

$('.draggable').keydown(function(e){
    if(e.keyCode == 46) {
        $(this).remove();
    }
});

任何想法为什么这不起作用？

【问题讨论】：

由于事件的目标是动态创建的，所以几乎可以通过事件委托来解决这个问题。请阅读.on() 的文档以获取更多信息。
它也不适用于静态元素

标签： jquery jquery-ui keyboard-shortcuts jquery-ui-draggable

【解决方案1】：

我想我看到了问题所在。 @Ctrl_Alt_Defeat 在正确的路径上，但是 .draggable 类上的 keydown 事件没有意义。由于这是 jQueryUI 可拖动的，因此这些事件仅在 .draggable 是当前关注的类时才会触发。当你想要它时，这可能不会发生。

我认为您可能希望将事件处理程序添加到文档中，但不指定可拖动类。

$('document').on('keydown', function(e) {
   alert("Method Hit");
   if(e.keyCode == 46) {
        console.log("Remove the draggable class now");
        $(".draggable").remove();
    }
});

当然，这种方法会将事件应用到整个文档，所以如果你点击删除，任何具有可拖动类的元素都会被删除。如果你没问题，那么这将起作用。如果你想执行有针对性的删除，你可以应用一个 on-click 来添加一个类，然后让 keydown 删除最后点击的 .draggable。

【讨论】：

【解决方案2】：

您可以尝试将搜索类的输入作为参数传递给 .on() 方法，如下所示：

$('document').on('keydown', '.draggable', function(e) {
       alert("Method Hit");
       if(e.keyCode == 46) {
            console.log($this);
            $(this).remove();
        }
    });

【讨论】：

这给了我相同的结果。还是谢谢。
您是否在事件中放置了控制台日志以确认事件没有触发？这看起来是正确的解决方案。
正如 Rich 所说，您是否尝试过使用 console.log 或老式警报或调试器语句与开发者工具
@MikeW - 我添加了一些你可以尝试的调试 - 使用开发者工具并确保 $this 是正确的元素 - 并且当你按下 keydown 时会触发警报
我使用了 devTools 但没有调用警报。逻辑上既不是日志