0

私は本当に奇妙な行動をしています。私はこのコードを持っています (無関係なコードを削除します)。

$(function() {
        function get_translations() {
            $('#translations tr').not(':eq(0)').remove();
            var item = {
                context: "1: context",
                term: "2: term",
                translation: "3: translation"
            };  

            var tr = $('<tr/>').
                append('<td class="context">' + (item.context || '&nbsp;') + '</td>').
                append('<td class="original-string">' + item.term + '</td>').
                append('<td class="translation translated-string">' + item.translation +
                       '</td>').
                append('<td class="delete-col"><button class="'+
                       'delete translation-delete">X</button></td>').
                data('term', item.term || '').
                data('translation', item.translation || '').
                data('context', item.context || '').
                appendTo('#translations');
        }
        get_translations();

       $('td.translation').live('click', function() {
           var $this = $(this);
           if ($this.find('textarea').length == 0) {
               var text = $this.empty().parent().data('translation');
               //$this.data('content', text).empty();
               $this.html('<tex' + 'tarea>' + text + '</text' +
                 'area><button>Save</button><a href="#" class="_cancel">Cancel</a>');
               //appendTo($this);
           }
       });
       $('td.translation button').live('click', function() {
           var td = $(this).parent();
           var tr = td.parent();
           console.log(td);
           td.html('foo');
           //td.replaceWith('<td class="translation translated-string">foo</td>');
       });
});

$('td.translation button')ハンドラーでtd.html('foo');は機能しませんがtd.replaceWith('<td class="translation translated-string">foo</td>');機能します。エラーはありません。単に何もしません。

これを使用してこの動作を再現しようとしています:

$(function() {
    $('table').append('<tr><td>:empty</td></tr>');
    $('td').live('click', function() {
        var tr = $(this).parent();
        $(this).html('<textarea></textarea><a class="foo" href="#">a:</a>');
    });
    $('.foo').live('click', function() {
        var td = $(this).parent();
        var tr = td.parent();
        td.html(':empty');
        return false;
    });
});

しかし、上記のコードは機能します。

を使用できますが、関数が機能しないreplaceWith理由を知る必要があります。html理由を知っている人はいますか？

更新:これを追加するwindow.td = td;と、コンソールからhtmlを呼び出すことができ、動作します。

4

2 に答える 2

1

こちらのデモを参照し、http://jsfiddle.net/QknuZ/2/ (with td.html())でアラートを確認してください。

これがあなたの質問に答えてくれることを願っています: HTMLhtml()は要素の内容を置き換えますが、replaceWith() は実際の要素を置き換えます。

http://api.jquery.com/html/

http://api.jquery.com/replaceWith/

要素を DOM から削除し、replaceWithhtml を再度追加します。

私が間違っている場合は修正してください。これがお役に立てば幸いです。

画像

ここに画像の説明を入力

于 2012-06-27T11:00:07.320 に答える
0

@Tats_innit からのヒントを使用しalert('call')て$('td.translation').live('click'、ボタンをクリックすると実行されました。最初にボタン ハンドラーを実行し (html と警告メッセージ ボックスを変更します)、td のハンドラーを呼び出してテキストエリアを再度作成します。

于 2012-06-27T11:13:11.687 に答える