如何使用 jquery 在 div 中添加带有值的文本框(就地编辑)
您好,我正在尝试使用 jquery 将就地编辑功能添加到我的网站。我不想使用插件,所以我的想法是,当您单击其中包含内容的 div 时,它会用文本框替换该 div,然后在模糊时提交一个帖子来保存内容。
到目前为止,我有点击事件,但我不知道如何用文本框替换 div,然后使其在模糊状态下提交,但我可能可以弄清楚 ajax 请求。
任何帮助都会很棒,谢谢。到目前为止,这就是我所拥有的......只是点击事件:
$('.control-panel-profile-update').click(function() {
alert('Handler for .click() called.');
});
HI, I'm trying to add edit in place functionality to my site with jquery. I don't want to use a plugin, so my idea was that when you click the div that has the content in it, it would replace the div with a text box, then on blur it would submit a post to save the content.
So far I have the click event, but I'm not sure how to replace the div with a text box, and then make it submit on blur, I can probably figure out the ajax request though.
Any help would be great, thanks. So far this is what I have... just the click event:
$('.control-panel-profile-update').click(function() {
alert('Handler for .click() called.');
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
虽然它还没有完全写好,也可能无法完全发挥作用,但值得一试。祝你好运:
这是一个小提琴:http://jsfiddle.net/Af6X6/2/。我还添加了对
enter
键的支持。It's not completely written, and it might not completely work, but it's worth a shot. Good luck:
Here's a Fiddle: http://jsfiddle.net/Af6X6/2/. I added support for the
enter
key too.有两种方法可以做到这一点,在现代浏览器中,您可以使用 contenteditable=true,然后在模糊时发送新内容。这解决了必须交换文本区域的问题。
或者你也可以用js的方式来做。
http://jsfiddle.net/2RyT2/23/
There are two ways to do this, in modern browsers you can use contenteditable=true, and then on blur send the new contents on their way. This takes care of having to swap out a textarea.
or you can do it the js way.
http://jsfiddle.net/2RyT2/23/
解决方案之一是添加一个隐藏的 div,其中包含一个文本框。
然后在您的点击函数中,显示文本框
您可以使用
.val("")
更新文本框的值希望这有帮助。
One of the solutions is to add a hidden div with a textbox in it.
Then in your click function, you show the textbox
You can update the value of the textbox with
.val("")
Hope this helps.