1

テーブルとそのデータを追加/削除/変更することにより、ユーザーがテーブルの値を編集できるようにする機能を追加しようとしています。

なんとかやりたいことができましたが、追加したいテキストが4回追加され、その理由を理解するのに十分賢明ではありません。

ここでデモを設定しましたhttp://jsfiddle.net/a973/CWQh9/1

これは起動されたコードです

$('#saveBtn').live("click", function(){
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();

    $(".itms").fadeOut("normal", function() {
            $(this).remove();

            $('#comp').append(txt);
            $('#orgn').append(txt2);
            $('#nextLast').append('<a href="#">change</a>')
            $('#lastTd').append("<a href='#'>erase</a>");

    });

誰かが私がテキストの3つの余分なインスタンスを取り除くのを手伝ってもらえますか？

最終結果は、デモ/プロトタイプの目的でのみ使用されます。

4

5 に答える 5

1

$('.itms')セレクターはページ上の4つの要素と一致していると思います。したがって、コールバック関数は4回呼び出されています。これは、appendの呼び出しが4回行われていることを意味します。

于 2013-03-25T16:34:50.620 に答える
1

これは、ハンドラーがそれぞれに対して呼び出されるためです".itms"。append()したがって、関数が呼び出されるたびに。

以下のコメントにあなたが求めていたものを追加しました。

新しいソリューション：フィドル

そのようにしてください：

$('#saveBtn').live("click", function () {
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();
    //$('#compName, #orgnr, #saveBtn, #cncl').remove();

    setTimeout( function() {
        $('#comp').append(txt);
    $('#orgn').append(txt2);
    $('#nextLast').append('<a href="#">change</a>')
    $('#lastTd').append("<a href='#'>erase</a>");
    }, 500);

    $(".itms").fadeOut("normal", function () {
        $(this).remove();
    });
    $('#raden').effect("highlight", {}, 1000);
});
于 2013-03-25T16:35:17.577 に答える
1

次の4行をfadeOut呼び出しの外に移動します。

$('#comp').append(txt);
$('#orgn').append(txt2);
$('#nextLast').append('<a href="#">change</a>')
$('#lastTd').append("<a href='#'>erase</a>");

だからあなたはこれを手に入れます：

$('#saveBtn').live("click", function () {
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();
    $('#comp').append(txt);
    $('#orgn').append(txt2);
    $('#nextLast').append('<a href="#">change</a>')
    $('#lastTd').append("<a href='#'>erase</a>");
    $(".itms").fadeOut("normal", function () {
        $(this).remove();
    });
})

それ以外の場合、追加は1回に1回ずつ、数回呼び出されます.itms。

jsFiddleの例（ライブが非推奨になったため、私もあなた.live()を.on()

于 2013-03-25T16:36:44.787 に答える
0

最も可能性の高い原因は、cssクラス.itmsを持つ要素が4つあるため、コールバックが4回起動されたことです。コードを見ると、テーブルに4つのtdが存在するため、これは4回発生します。

于 2013-03-25T16:35:30.703 に答える
0

セレクターに一致する要素が複数あるため、関数は複数回呼び出されます。クリックした要素でそれを試してみてください。

 $(".itms").click().fadeOut("normal", function() {

            $(this).remove();

            $('#comp').append(txt);
            $('#orgn').append(txt2);
            $('#nextLast').append('<a href="#">change</a>')
            $('#lastTd').append("<a href='#'>erase</a>");


    });
于 2013-03-25T16:36:24.343 に答える