3

テキスト入力フィールドを追加するボタンがあります。

<button id="addD">Add D</button>

このボタンをクリックすると、テキストフィールドと<h3>タグが追加されます。

    <script>
    var dNum=1;
    function addW(){
        $('#tableW').append('<tr><td><h3 id="wd'+dNum+'"></h3></tr>');
    }
    $('#addD').click(function(){
        $('#divD').append('<input type="text" class="dName" id="d'+dNum+'">');
        addW();
        dNum++;
    });
    </script>

ここで、追加されたテキスト フィールドに変更を加えて、追加された<h3>タグに反映させたいと考えています。私はこれをやってみました：

    $(document).on('change', '.dName', function(){ //when input field change
        var h3ID = 'w'+$(this).attr('id');
        var h3Tag = document.getElementById(h3ID);
        h3Tag.firstChild.nodeValue = document.getElementById($(this).attr('id')).value;
    });

参照テキストは変更されません。<h3>対応するIDで特定のタグを参照できる方法はありますか? 問題は追加されているタグにあると思います。それに対してアクションを実行する必要がないため、.on() は無関係のようです。

4

2 に答える 2

1

jQuery を使用しているため、生の JavaScript dom 操作を使用する必要はありません。

h3を使用して簡単に参照を取得し、jQuery が提供するメソッドidを使用して内容を変更できます。html()

$(document).on('change', '.dName', function(){ //when input field change
    var h3ID = 'w'+$(this).attr('id');
    $('#' + h3ID).html($(this).val());
});

デモ:フィドル

于 2013-03-20T16:05:01.140 に答える
0

項目を制御するためのより明確なアプローチ:

var dNum=1;
function addW(){
    var $h3 = $('h3');
    $h3.attr('id', dNum);
    var $elem = $elem.wrap('<td>').wrap('<tr>');
    $elem.on('change', function() { // do something on change});

    $('#tableW').append($elem);
}
于 2013-03-27T23:55:23.220 に答える