1

ここにjsfiddleがあります

ここに私のhtmlがあります

<table id="commentsTable">
        <tr>
            <td name="userid"> JIM </td>
            <td name="comment" id="68" class="commentTD">  something   </td>
            <td><a class="edit" href="#">edit</a></td>
        </tr>
</table>​

そして私のjs：

var update = "update";

$("a.edit").click(function(e) {
    e.preventDefault();
    var comment = $(this).closest("tr").find('.commentTD');
    comment.html('<textarea name="comment" class="commentArea">' + comment.text() + '</textarea>');
    $(this).removeClass().addClass(update).text(update);
    bindUpdate();
});

function bindUpdate() {
    $("a." + update).click(function(e) {
        e.preventDefault();
        var commentNewText = $(this).closest('tr').find('textarea.commentArea').val();
        alert(commentNewText);
    });
};​

テキストエリアを追加してクリックイベントをバインドすることはできますが、新しい値を取得できないようです.古い値を取得しています...

4

2 に答える 2

2

問題は、リンクから古いイベントのバインドを解除していないため、クリックするたびに新しいテキストエリアが追加され、bindUpdate() 機能が呼び出されるだけです。

この更新された jsFiddle を参照してください: http://jsfiddle.net/RALDF/8/

編集:の値を変数に保存し$(this)て再利用することをお勧めします。これは、複数回呼び出しているため、パフォーマンスに悪影響を及ぼします。/jQuery は、$(this)/ を実行するたびに新しいオブジェクトを作成する必要があります。

于 2012-10-10T10:18:47.173 に答える
2

新しいハンドラーの前に最初のハンドラーがトリガーされます。unbind最初のハンドラーに追加すると、問題なく動作します( fiddle )。より予測可能な方法でこれを達成するには、ハンドラーを別の関数に抽出できます。

于 2012-10-10T10:19:39.513 に答える