Question

我试图在某个部分显示文本，同时使用jquery在另一部分上键入。我使用以下代码行：

$('#sectionName').on('keyup', ()=> {
        $('#output-1').html($('#sectionName').val())
});

当我将代码应用于其他虚拟元素时，代码确实有效，但是当我真正尝试在我正在处理的网站上实现它时，它拒绝工作。

为了给出更多细节，用户按下按钮插入一个部分，该按钮会在侧边栏上添加一个标签，然后在右侧添加一个新部分。从右侧开始，用户应键入应该在侧栏上反映的部分名称。然而，这不会发生。当我开始输入时，文字没有被反映出来。

我用于插入新部分的代码：

function insertNewSection () {
// Inserting a new section

// Increment the session counter variable 
// to reflect how many sessions have been created
sessionStorage.setItem(
    'sectionCounter', Number(sessionStorage.getItem('sectionCounter')) + 1);
// Get the new sessionCounter value
const sectionCounter = sessionStorage.getItem('sectionCounter');

// Append the new section tab to the sidebar panel
$('#survey-format-panel > div').append(
    '<a id="output-'+ sectionCounter +'" class="custom-list-item form-control text-limit"></a>'
    );
// Append the new section on the right hand side / Content Side
var section = $('#section').html();
$('<div id="section-' + sectionCounter + '">' + section + '</div>').insertBefore('#section')

// Hide the already displayed cover page 
// and reaveal the new, blank section
$('#coverPage').hide();

}

有谁知道我错过了什么？

Answer 1

在将动态元素（在您的情况下是一个新部分）添加到DOM中时，请考虑附加您的事件处理程序，因为现有处理程序不能使用新生成的内容或指令。

Answer 2

当您的元素动态添加时，您必须在每次添加新元素后定义事件侦听器，或者使用事件委托原则创建一个事件处理程序（以便它也可以用于未在文件）。

而且，您需要确定相应的output元素，我认为它在id属性中具有相同的sectionCounter：

$(document).on('keyup', '[id^="sectionName"]', function() {
     var sectionCounter = $(this).attr('id').split('-')[1];
     $('#output-' + sectionCounter).text($(this).val());
});

JQuery - 键入时显示文本

2 个答案: