文本区域的内联编辑 – 如何获取 ID？

Question

我使用jqInline编辑在网页上进行内联编辑。一切都有效，除了我不知道如何获取将更改保存到数据库（通过Django）所需的项目。id上下文如下所示：<div id="remark14756" class="remark" data-cid="14756">    Sample Text</div>这是脚本：<script src="/static/inline-edit.jquery.js"></script><script>    $(".remark").inlineEdit({        type: 'textarea',        onChange: function (e, text, html) {            // Executes when exiting inline edit mode and a change has been made            c_id = $(this).attr("data-cid");            alert("Test: ", c_id)        }    });</script>显然，在这种情况下不起作用。我尝试了一切，搜索了很多，但我找不到如何以正确的方式做到这一点。有人知道答案吗？$(this)

Answer 1

内联编辑文档说：

on更改（此，文本，html） - 在退出内联编辑模式并已进行更改时执行

使用相当具有误导性。this

因此，第一个参数实际上是元素。

$(".remark").inlineEdit({

    type: 'textarea',

    onChange: function (elem, text, html) {

       // `this` refers to inlineEdit instance plugin

       // `elem` is the currently edited element

       const c_id = $(elem).attr("data-cid");

       alert(c_id);  // 14756

    }

});

该插件未以预期的“jQuery插件”方式执行。

通常正确编写的插件应该：

将所有方法绑定到元素被调用方，

（对于 Event 方法），第一个参数应始终引用原始事件。

允许开发人员使用关键字引用它以获取本机JS元素，或者在公开的公共方法中执行操作，就像我们对本机jQuery方法的期望一样，并且可以访问事件（即：如果我们使用箭头函数来提取关键字不存在，则很有用）this$(this)currentTargetthis

$someElem.on('click', function(evt) {

  const $el = $(this); // what we're used to

});

$someElem.on('click', (evt) => {

  const $el = $(evt.currentTarget); // the importance of always passing the Event as first param

});

显然没有在该插件中实现。