jQuery 如何编辑数据 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16202723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to edit data onclick
提问by Source
I am not sure what it is called, but I want to be able to click on e.g. a divcontaining a number, and then it will change into a input text field, with the value being the number I clicked.
我不确定它叫什么，但我希望能够点击div包含一个数字的 a，然后它会变成一个输入文本字段，值是我点击的数字。
Then I want to edit the number, and click off (onblurevent), and it will change back to a div, from the text field showing the new edited number. The number would have also been updated into the database via ajax.
然后我想编辑数字，然后单击关闭（onblur事件），它会div从显示新编辑的数字的文本字段中变回, 。该数字也将通过 ajax 更新到数据库中。
What is this function called?
What is the best way to code this?
这个函数叫什么？
对此进行编码的最佳方法是什么？
回答by jsshah
You can do the following:
您可以执行以下操作：
Have a click event and create a textbox on the fly which takes the text inside the div as a value.
有一个点击事件并动态创建一个文本框，它将 div 内的文本作为值。
The have a blur even which binds to that textbox and makes an AJAX call and in its success change the div text
有一个模糊甚至绑定到该文本框并进行 AJAX 调用并成功更改 div 文本
Lets say your HTML is like:
假设您的 HTML 如下所示：
<div id="fullname">Amazing Spider man</div>
And your JS code will be like:
你的 JS 代码将是这样的：
$('#fullname').click(function(){
var name = $(this).text();
$(this).html('');
$('<input></input>')
.attr({
'type': 'text',
'name': 'fname',
'id': 'txt_fullname',
'size': '30',
'value': name
})
.appendTo('#fullname');
$('#txt_fullname').focus();
});
$(document).on('blur','#txt_fullname', function(){
var name = $(this).val();
$.ajax({
type: 'post',
url: 'change-name.xhr?name=' + name,
success: function(){
$('#fullname').text(name);
}
});
});
This is demostrated in this jsfiddle
这在此jsfiddle 中进行了演示
回答by MarsAndBack
HTML5 has a contentEditableattribute with pretty good browser support, so you may want to explore this first if it aligns with your situation and if you want to do no-jquery. Simply putting contentEditable="true"in a div will make it clickable and editable (basic text).
HTML5 有一个非常好的浏览器支持的contentEditable属性，因此如果它符合您的情况并且您想不使用 jquery，您可能需要先探索它。只需放入div 即可使其可点击和可编辑（基本文本）。contentEditable="true"
To make practical use of the editable element, you'll need to use JS to watch the element and trigger an action when there's input. In the OP's case, in JS they would place the newly-edited content somewhere (like an array) ready for an ajax function to send it out to an external database. More info hereand here.
要实际使用可编辑元素，您需要使用 JS 来观察元素并在有输入时触发操作。在 OP 的情况下，在 JS 中，他们会将新编辑的内容放在某处（如数组），以供 ajax 函数将其发送到外部数据库。更多信息在这里和这里。
Also, here's a pluginthat takes it further and gives more WYSIWYG controls for these fields.
此外，这里有一个插件，可以更进一步，并为这些字段提供更多 WYSIWYG 控件。
Anyways, here's a sample code, no plugins, no jquery:
无论如何，这是一个示例代码，没有插件，没有 jquery：
var myEditableElement = document.getElementById('myContent');
myEditableElement.addEventListener('input', function() {
console.log('An edit input has been detected');
console.log(myEditableElement.innerHTML);
});<div id="myContent" contentEditable="true">This is an editable element. Click and type something!</div>回答by imsky
There is jEditable: http://www.appelsiini.net/projects/jeditable
有 jEditable：http: //www.appelsiini.net/projects/jeditable
However, X-editable looks much nicer: http://vitalets.github.io/x-editable/
然而，X-editable 看起来更好：http: //vitalets.github.io/x-editable/
回答by nick
Why not just stay with one input field, and change the field styles on blur. You can take everything away so it doesnt look like an input, that way there's no need to change back and forth. Make an Ajax call on blur.
为什么不只保留一个输入字段，并在模糊时更改字段样式。你可以把所有东西都拿走，这样它看起来就不像一个输入，这样就不需要来回改变了。对模糊进行 Ajax 调用。
回答by vinaynag
It is called jQuery edit in place. There are a number of plugins available from jQuery for that.
它被称为 jQuery 就地编辑。为此，jQuery 提供了许多插件。
回答by Travis J
You named the whole process already.
你已经命名了整个过程。
First, assign all of your numbers or fields with some class.
首先，将所有数字或字段分配给某个类。
<div class="editable">value</div>
Then, assign that class a click event.
然后，为该类分配一个点击事件。
$('.editable').click(function(){
//replace element with input element containing the value
//attach an onblur event to the new element
$(newelement).blur(function(){
//use $.ajax to send the element's value to your server
//remove the input element and then replace the previous element with the new value
});
});
