0

だから私は、要素を生成し、イベントをそれらにバインドする必要があると考えています。要素を生成するたびに、イベントをバインド解除して、生成された要素に for ループで再バインドします。これらの関数はトリガーされるように見えますが、間違ったインデックスを取得します (これにより、どの要素を処理するかがコードに伝えられます)。

jsFiddle http://jsfiddle.net/6UgYe/4/でコードを確認してください。

これを解決するモジュラーは何でもできます。また、私のコードに自由にコメントしてください。昨年、JavaScript を使い始めたばかりのときに、このほとんどを書きました。

よろしく、

アッケ

編集: これが実際のソリューションです: http://jsfiddle.net/nwH8Z/3/ブラーの VAT-Free 価格を計算します。

4

4 に答える 4

1

bindEmAll関数を次のように変更します-

function bindEmAll()
{
    $('#container').on('blur', 'input[id$=".5"]', function(){

     $('#Errorfield').append('Current box is ' + this.id + '<br/>').append(num_format(this.value) + '<br />')  

})
}

'.5' で終わる ID を持つすべての入力ボックスに、num_format()関数によって処理される ID と値を に追加します#Errorfield。イベント ハンドラーは、動的に追加された場合でも、 内のすべての入力ボックスにアタッチされます。#container

;bindEmAll()のクリック ハンドラから削除します。#addTTそうしないと、addTT をクリックした回数だけイベント ハンドラーがバインドされてしまい、非常に面倒なことになります ;-)

$('#addTT').click(function() {
    addTT('#container');
});

ここでフィドルを更新しました。

于 2012-06-21T15:04:56.910 に答える
1

blurループが終了するまでイベント ハンドラが実行されないため、問題が発生しています。実行順序は次のとおりです。

  • イベント ハンドラーをアタッチして、項目 1 のイベントをぼかします
  • イベント ハンドラーをアタッチして、項目 2 のイベントをぼかします

...今度いつか...

  • 実際にぼかしイベントを呼び出す

イベント ハンドラーが呼び出されるまでに、ループからの変数の値iは最後の値のインデックスに変更されているため、それがイベント ハンドラーで使用されています。

これを回避するには、コードをクロージャー内に配置するだけです。

 (function(i) {
        $('#container input#box' + i + '\\.5').unbind();
        $('#container input#box' + i + '\\.5').blur(function() {
            //error processing function;
            $('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');

        });
        $('#container input#box' + i + '\\.5').blur(function() {
            $('#container input#box' + i + '\\.5').val(num_format($('#container input#box' + i + '\\.5').val()));
            $('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');
        });
    })(i);

ここでフィドルを更新しました

于 2012-06-21T15:05:41.703 に答える
0

新しい要素を追加してそれらのイベントを処理する小さな例を次に示します。

<button id="add">+</button>
<button id="remove">-</button>
<div id="holder">

</div>

.

$('#add').on('click', function () {
    $('#holder').append('<p>click me!</p>');
});

$('#remove').on('click', function () {
    $('#holder p:last-of-type').remove();
});

$('#holder').on('click', 'p', function () {
    alert('my id is: ' + $('#holder p').index(this));
});

ここで確認できます: http://jsfiddle.net/simo/PyKDz/

于 2012-06-21T14:54:22.300 に答える
0 
  boxes = 1;

        function num_format(input) {
            //For demo purporses, we only parseInt()+5
            ret = parseFloat(input) + 5;
            return ret;
        }

        function addTT(parentElement, arg1, arg2, arg3, arg4, arg5) {

            if (!arg1) {
                arg1 = "";
            }
            if (!arg2) {
                arg2 = "";
            }
            if (!arg3) {
                arg3 = "";
            }
            if (!arg4) {
                arg4 = "";
            }
            if (!arg5) {
                arg5 = num_format((0.00).toFixed(2));
            }


            row = $('<tr></tr>').attr('id', boxes);

            cell1 = $('<td class="inputcell"></td>');
            cell2 = $('<td class="inputcell"></td>');
            cell3 = $('<td class="inputcell"></td>');
            cell4 = $('<td class="inputcell"></td>');
            cell5 = $('<td class="inputcell"></td>');

            input1 = $('<input></input>').attr('style', 'width:100px;').attr('id', 'box' + boxes + '.1').attr('name', 'box' + boxes + '_1').attr('type', 'text').attr('value', arg1);
            input2 = $('<input></input>').attr('style', 'width:100px;').attr('id', 'box' + boxes + '.2').attr('name', 'box' + boxes + '_2').attr('type', 'text').attr('value', arg2);
            input3 = $('<input></input>').attr('style', 'width:93px;').attr('id', 'box' + boxes + '.3').attr('name', 'box' + boxes + '_3').attr('type', 'text').attr('value', arg3);
            input4 = $('<input></input>').attr('style', 'width:149px;').attr('id', 'box' + boxes + '.4').attr('name', 'box' + boxes + '_4').attr('type', 'text').attr('value', arg4);
            input5 = $('<input></input>').attr('style', 'width:90px;').attr('id', 'box' + boxes + '.5').attr('name', 'box' + boxes + '_5').attr('type', 'text').attr('value', arg5);

            $(cell1).append(input1);
            $(cell2).append(input2);
            $(cell3).append(input3);
            $(cell4).append(input4);
            $(cell5).append(input5);

            $(row).append(cell1);
            $(row).append(cell2);
            $(row).append(cell3);
            $(row).append(cell4);
            $(row).append(cell5);

            $('#tBoxes').append(row);
            boxes++;
        }

        function subTT(parentElement) {
            boxes = boxes - 1;
            $(parentElement + ' #' + boxes).hide(0, function () {
                $(parentElement + ' #' + boxes).remove();
            }
            );
        }
        function bindEmAll() {
            alert(boxes);
            for (var i = 1; i <= boxes - 1; i++) {

                $('#container input#box' + i + '\\.5').blur(function () {
                    alert($(this).val());
                    $(this).val(num_format($(this).val()));
                    //$('#container input#box' + i + '\\.5').val(num_format($('#container input#box' + i + '\\.5').val()));
                    //$('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');
                });
            }
        }
        $('#addTT').click(function () {
            addTT('#container');
            bindEmAll();
        });
        $('#subTT').click(function () {
            subTT('#container');
        });
        $(function () { addTT('#container'); bindEmAll(); });
于 2012-06-21T14:48:04.923 に答える