Question

我有一个附加文本输入字段的按钮。

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

引用的文本不会更改。无论如何我可以引用具有相应ID的特定<h3>标签吗？我认为问题在于附加标签，因为不需要采取任何行动，.on（）似乎无关紧要。

Answer 1

由于您使用的是jQuery，因此无需使用原始javascript dom操作。

您可以使用h3轻松获得对id的引用，然后使用jQuery提供的html()方法更改内容。

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

演示：Fiddle

Answer 2

更清晰的控制物品方法：

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

JQuery：通过附加对象引用附加对象

2 个答案: