Question

我有这段代码：

<html>
    <head>
        <title></title>

        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#k123").click(function () {
                //var text=$(this).val(); //this does not work
                var text=$(this).text();
                var k='<div id="k123"><textarea rows="10" cols="10">' + text + '</textarea><br /><input     type="button" onclick="save();" value="save"><input type="button" onclick="cancel();"     value="cancel"></div>';
                $(this).replaceWith(k);
            });

        }); 

        function save() {
        }
        function cancel() {
            //alert(text);
            var k='<div id="k123"></div>';
            $("#k123").replaceWith(k);
        }
    </script>
    </head>
    <body>
        <div id="k123">aaaaa</div>
    </body>
</html>

我的问题是：

1）在两个功能中：取消＆amp;保存，如何获取div id-＆gt;＃k123-＆gt; textarea-＆gt;内容的内容功能取消＆amp;保存在范围之外，它们是独立的函数我无法告诉$（this）.parent（）。

我需要询问有关id＃k123的div，然后进入textarea的内容并获取它。而且我还要自动获取id＃k123，因为如果我有很多div，我就不能告诉save＆amp;手动取消div的id，取消＆amp; save应该从input type ='button'的父ID中知道div的id发送者。

* *请不要选择从输入按钮发送div id的建议

* *我们假设两个输入按钮都没有IDS或名称

我尝试了另一种方式，但仍然遇到同样的问题我换了

$(document).ready(function() {
$("#k123").click(function () {
var text=$(this).text();
var k='<div id="k123"><textarea rows="10" cols="10">' + text + '</textarea><br /><input     type="button" value="save"><input type="button" value="cancel"></div>';
$(this).replaceWith(k);
});

//$("#k123 > input").click(function() {
$("#k123").children("input:second").click(function() {
alert("hi");
});

});

谢谢。

Answer 1

我在下面有你的工作代码。你甚至不需要id ..只是一个容器div和事件委托。下面的内容完成了我认为你追求的东西，我相信这是一个更简单，更有效的时尚：

（我添加了评论以帮助理解代码）

$(document).ready(function() {
    $(".container").on('click', function(e) {
        if (!$(e.target).is('input') && !$(e.target).is('textarea')) { //check to make sure the target is neither an input or a textarea
            var div_text = $(e.target).text(); // use a variable named something other than text, because text is already a method for another element
            $(e.target).data('text',div_text); // set the div's current contents as a hidden data attribute, to be retrieved later.  You can get rid of this and the other line if you want cancel to completely wipe the div.
            var k = '<textarea rows="10" cols="10">' + div_text + '</textarea><br /><input type="button" value="save"><input type="button" value="cancel">';
            $(e.target).html(k); //set the inner HTML of the div, so we don't lose any data saved to that div
        }
        if ($(e.target).is('input') && $(e.target).val() == 'save') {
            $(e.target).parent().html($(e.target).parent().find('textarea').val()); // replace the current contents of the parent div with the contents of the textarea within it.

        } else if ($(e.target).is('input') && $(e.target).val() == 'cancel') {
            $(e.target).parent().html($(e.target).parent().data('text')); //set the contents to the old contents, as stored in the data attribute.  Just replace the contents of the .html() here with '' to completely clear it.
        }
    });
});

DEMO

Answer 2

已修订 - 工作

检查出来......不是那么关闭，而是关闭！

REVISED JS Fiddle

function editit() {

        var divId = $(this).attr('id');

        var text = $(this).html();

        var k = '<div id="' + divId + '" class="editable"><textarea id="newvalue' + divId +'" rows="10" cols="10">' + text + '</textarea><br /><input id="save'  + divId + '" type="button" value="save"><input id="cancel'  + divId + '" type="button" value="cancel"></div>';

        $('#' + divId).replaceWith(k);

        $('#cancel' + divId).click(function() {
            $('#' + divId).replaceWith('<div id="' + divId + '" class="editable">' + text + '</div>');
            $('.editable').bind('click', editit);
        });

        $('#save' + divId).click(function() {
            $('#' + divId).replaceWith('<div id="' + divId + '" class="editable">' + $("#newvalue" + divId).val()+ '</div>');
            $('.editable').bind('click', editit);
        });

    }

 $('.editable').bind('click', editit);

Div的内容编辑器

2 个答案: