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

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>

现在我想要对附加的文本字段进行更改以反射(reflect)附加的 <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() 似乎无关紧要。

Answer 1

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

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

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

演示:Fiddle