使用jQuery创建编辑就地div并在其下方创建可用于编辑的新div

时间:2010-03-09 13:29:49

标签: javascript jquery html edit-in-place

我是jQuery的新手,想知道是否有可能创建和编辑我可以点击的就地div,键入一些文本,让它保存并立即动态另一个div弹出它下面将允许相同的功能输入和保存,等等。如果有人有任何想法,将不胜感激。

    $(document).ready(function() {
        $('.edit_area').editable(function(value, settings) {
            return (value);
        }, {
            type: 'textarea',
            onblur: 'submit',
            indicator: 'Saving...',
            callback: function(value, settings) {
                var thisData = $(value);

                $.post('<%=Url.Action("SetPostieNotes", "Posties") %>',
                'postieNotes=' + escape(thisData)
                );
                var divTag = document.createElement("div");
                divTag.id = "div";
                divTag.setAttribute("align", "center");
                divTag.className = "edit_area";
                divTag.innerHTML = "Test Dynamic Div.";
                document.body.appendChild(divTag);
            }
        });
    });

2 个答案:

答案 0 :(得分:5)

使用jEditable进行编辑就地功能,并使用它的回调函数在现有的div下面生成新的div。


你并没有真正使用jEditable提供的所有东西,试试这样的东西(我现在无法测试它,但它应该给你一些想法):

$(function() {
    $('.edit_area').editable('<%=Url.Action("SetPostieNotes", "Posties") %>', {
        callback: function(v, settings) {
            var new_div = $('<div />')
                          .addClass('edit_area')
                          .editable('<%=Url.Action("SetPostieNotes", "Posties") %>', settings);

            $(this).after(new_div);
        }
    });
});

这应该就是它的全部。你不需要自己提交,这就是jEditable的用途。只需提供您要保存的URL作为第一个参数,并将设置作为第二个参数。

答案 1 :(得分:0)

我实际上是通过使用jEditable开始的,而是转而使用tectual的editables()插件 这是我正在使用的代码https://github.com/relipse/jQuery-Editable/blob/master/jquery.editable.js