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());
});

Demo: Fiddle

于 2013-03-20T16:05:01.140 回答
0

A clearer approach to control items:

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 回答