无法使用 jquery 自定义内联编辑器

发布于 2024-12-02 12:52:57 字数 936 浏览 0 评论 0原文

我写了一个自定义内联编辑器，但我有一个问题。如果我点击保存按钮之后我无法再次编辑它，我该如何修复它以使其工作？你能帮我让它变得多重吗？我的意思是，这仅适用于页面上的 1 个 div，不能超过 1 个。这是代码：

$(function() 
{
    var fut = false;
    $('.jq_edit').live('click', function() {
        if (fut==true){ } else {                                 
        var tartalom = $(this).html();
        $(this).html("<input type='text' value='"+tartalom+"'><input type='button' value='Save' class='save'>");
        fut=true;
        }
    });
        $('.save').live('click', function() {
            var mtartalom=$(this).prev().attr('value');
            $('.jq_edit').html(mtartalom);
            $('.jq_edit').append(" <span id='ok'><img src='accept.png'> Success</span>");
            $('#ok').delay(1500).fadeOut(500);
        });
});

和 html：

<body>
<div class="jq_edit">adsadasd</div>
</body>

谢谢您的帮助！

原文

i wrote a custom inline editor, and i have a problem with it. If i clcik on save button after then i can't edit it again, how can i fix it to work? And can you help me, to make it multiple? I mean, this work only with 1 div on a page, not more than 1.
Here is the code:

$(function() 
{
    var fut = false;
    $('.jq_edit').live('click', function() {
        if (fut==true){ } else {                                 
        var tartalom = $(this).html();
        $(this).html("<input type='text' value='"+tartalom+"'><input type='button' value='Save' class='save'>");
        fut=true;
        }
    });
        $('.save').live('click', function() {
            var mtartalom=$(this).prev().attr('value');
            $('.jq_edit').html(mtartalom);
            $('.jq_edit').append(" <span id='ok'><img src='accept.png'> Success</span>");
            $('#ok').delay(1500).fadeOut(500);
        });
});

And the html:

<body>
<div class="jq_edit">adsadasd</div>
</body>

Thank you for the help!

分享到QQ

分享到微博

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

发布评论

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

老娘不死你永远是小三 2024-12-09 12:52:57

要使其成为多个，您必须进行很多更改，这里是我的解决方案：

$(function() {
    $('.jq_edit').live('click', function() {
        // if success message is visible, remove it
        $(this).find('.ok').remove();

        // if already in input mode, return
        if ($(this).hasClass('inputMode')) {
            return true;
        }

        // change to input mode
        var tartalom = $(this).html();
        $(this)
            .empty()
            .append("<input type='text' value='" + tartalom + "'>")
            .append("<input type='button' value='Save' class='save'>")
            .addClass('inputMode');
    });

    $('.save').live('click', function() {
        // create success message
        var jSuccess = $("<span class='ok'> <img src='accept.png' /> Success</span>");

        // deactivate input mode
        $(this).parent()
            .html($(this).prev().val())
            .append(jSuccess)
            .removeClass('inputMode');

        // animate success message
        $(jSuccess).delay(1500).fadeOut(500, function() {
            $(this).remove();
        });

        // prevent jq_edit click handler
        return false;
    });
});

另请参阅我的 jsfiddle。

To make it multiple you have to change a lot, here my solution:

$(function() {
    $('.jq_edit').live('click', function() {
        // if success message is visible, remove it
        $(this).find('.ok').remove();

        // if already in input mode, return
        if ($(this).hasClass('inputMode')) {
            return true;
        }

        // change to input mode
        var tartalom = $(this).html();
        $(this)
            .empty()
            .append("<input type='text' value='" + tartalom + "'>")
            .append("<input type='button' value='Save' class='save'>")
            .addClass('inputMode');
    });

    $('.save').live('click', function() {
        // create success message
        var jSuccess = $("<span class='ok'> <img src='accept.png' /> Success</span>");

        // deactivate input mode
        $(this).parent()
            .html($(this).prev().val())
            .append(jSuccess)
            .removeClass('inputMode');

        // animate success message
        $(jSuccess).delay(1500).fadeOut(500, function() {
            $(this).remove();
        });

        // prevent jq_edit click handler
        return false;
    });
});

Also see my jsfiddle.

回复收藏 0 原文