Question

我网页上的各种元素都有内容可编辑的标记。

点击它们时我会这样做：

$('[contenteditable]').on('click', this.edit);

p.edit = function(e) {

   console.log(e.currentTarget);
   e.currentTarget.on('keydown', function() {
        alert("keydown...");
   });


};

我得到当前目标确定，但是当我尝试添加keydown时，我得到了错误：

Uncaught TypeError: undefined is not a function

Answer 1

它是一个原生的DOM元素，你必须将它包装在jQuery中

$(e.currentTarget).on('keydown', function() {
    alert("keydown...");
});

e.currentTarget应该等于事件处理程序中的this，这是更常用的？

有点难以说明这是如何运作的，但我想我会做点什么

$('[contenteditable]').on({
    click : function() {
        $(this).data('clicked', true);
    },
    keydown: function() {
        if ($(this).data('clicked')) 
            alert("keydown...");
    }
});

Demo

Answer 2

首先，您要尝试在DOM元素上使用jQuery方法。第二个问题是我认为你不想绑定点击的内容，而是内容可编辑元素本身。

在点击时添加事件而不是全局侦听器似乎很奇怪。但这是基本的想法

$(this)  //current content editable element
    .off("keydown.cust")  //remove any events that may have been added before
    .on('keydown.cust', function(e) {  //add new event listener [namespaced]
        console.log("keydown");  //log it was pressed
});

Answer 3

编辑：我的代码失败了。现在工作正常。

获取代码，我改进了这个代码：

$(function(){
    $('[contenteditable]').on('click', function(){
        p.edit($(this));
    });
});

var p = {
    edit: function($e) {
        console.log($e);
        $e.on('keydown', function() {
            console.log($(this));
            alert("keydown...");
        });
     }
}

您可以 check it at jsFiddle

Answer 4

你需要在jQuery中包装e.currentTarget（这是一个本机DOM元素），因为＆＃34; on＆＃34; event是一个jQuery事件：

$(e.currentTarget).on('keydown', function() {
    alert("keydown...");
});

修改

$('[contenteditable]').on('click', p.edit); p.edit = function(e) { $(e.currentTarget).on('keydown', function() { alert("keydown..."); }); };

您在p.edit之后定义$('[contenteditable]').on('click', p.edit);导致错误，因为p.edit在声明on时不存在。

如果您不知道，您将p.edit定义为函数表达式，这意味着您必须在调用它之前对其进行定义。

将on事件添加到e.currentTarget？

4 个答案: