0

我有这个代码：

<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）在这两个函数中：取消和保存，如何获取 div id->#k123->textarea->content 函数的内容取消和保存超出范围，它们是我无法告诉 $(this).parent 的独立函数()。

我需要询问具有 id #k123 的 div，然后进入 textarea 的内容并获取它。而且我还必须自动获取 id #k123，因为如果我有很多 div，我无法手动告诉保存和取消 div 的 id，取消和保存应该从输入 type='button'`s parent 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");
});

});

谢谢你。

4

2 回答 2

2

我在下面为您提供了工作代码。您甚至不需要 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.
        }
    });
});​

演示

于 2012-11-02T23:26:56.713 回答
0

修订 - 作品

看看这个……不完全在那里，但很接近！

修改后的 JS 小提琴

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);
于 2012-11-02T22:22:48.277 回答