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

发布于 2024-08-24 23:43:45 字数 1030 浏览 7 评论 0原文

我是 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);
            }
        });
    });

原文

I'm new to jQuery and would like to know if it is possible to create and edit-in-place div that I can click on, type some text, have it save and immediately have another div dynamically pop up beneath it that will allow the same capability to type in and save, so on and so forth. If anyone has any ideas it would be greatly appreciated.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执着的年纪 2024-08-31 23:43:45

使用 jEditable 进行就地编辑功能，并使用它的回调函数来生成新的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 作为第一个参数，并将设置作为第二个参数。

Use jEditable for the edit-in-place functionality, and use it's callback functions to spawn the new div below the existing one.

You're not really using all that jEditable has to offer, try something like this (I am unable to test this right now but it should give you some ideas):

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

That should be all there is to it. You don't need to do the submitting yourself, that's what jEditable is for. Just supply the URL you wish to save to as the first parameter, and settings as the second.

回复收藏 0 原文