文本编辑的内联编辑–如何获取ID? [英] Inline Editing of Textarea – How to get the id?

问题描述

我使用 jqInlineEdit 在网页上进行内联编辑.一切正常，除了我不知道如何获取将更改保存到数据库(通过Django)所需的项目的id.

I use jqInlineEdit for inline editing on a web page. Everything works, except I don't know how to get the id of the item which I need for saving the change to the database(via Django).

HTML看起来像这样:

The HTML looks like this:

<div id="remark14756" class="remark" data-cid="14756">
    Sample Text
</div>

那是JavaScript:

That's the JavaScript:

<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)在这种情况下不起作用.我尝试了所有内容并进行了很多搜索，但找不到正确的方法.有人知道答案吗?

Obviously, $(this) does not work in this context. I tried everything and searched a lot but I can't find how to do it the right way. Does anybody know the answer?

推荐答案

inlineEdit文档说:

onChange(this, text, html)-退出内联编辑模式并进行更改后执行

onChange(this, text, html) - Executes when exiting inline edit mode and a change has been made

与this的使用具有相当大的误导性.

with the use of this being quite misleading.

因此，第一个参数实际上是Element.

therefore the first param is actually the Element.

$(".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插件"方式执行.
通常正确编写的插件应:

That plugin is not performing in an expected "jQuery Plugin" way.
Usually properly written plugins should:

• 将所有方法绑定到Element被调用者，
• (对于事件方法)，第一个参数应始终引用原始事件.

允许开发人员使用this关键字引用它来获取本机JS元素，或者在暴露的公共方法内进行$(this)，就像我们希望从 native jQuery方法中期望的那样，并具有访问事件的权限(即:由于不存在this关键字，因此在使用箭头功能提取currentTarget的情况下很有用)

allowing a developer to reference it using the this keyword to get the native JS Element or either doing $(this) inside the exposed public Methods just like we're expected from native jQuery Methods, and to have accessible the Event (i.e: useful in case we use arrow functions to extract the currentTarget since the inexistence of this keyword)

$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
});

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

这篇关于文本编辑的内联编辑–如何获取ID?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！