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) 両方の関数: cancel & save 、div id->#k123->textarea-> content 関数 cancel & save のコンテンツを取得するにはどうすればよいですか? ().

ID #k123 を持つ div について質問し、textarea のコンテンツにアクセスして取得する必要があります。また、ID #k123 を自動的に取得する必要もあります。これは、多くの div がある場合、div の ID を手動で保存してキャンセルすることができないため、キャンセルして保存すると、input type='button'`s 親 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 に答える