jQuery .append DOM 更新 [重复]

Posted 2023-05-09

【中文标题】jQuery .append DOM 更新 [重复]

【英文标题】：jQuery .append DOM update [duplicate]

【发布时间】：2018-04-08 20:18:31

【问题描述】：

我有一个页面，用户可以在其中将他们的脚本添加到表单中，然后提交它们。我正在使用.append() 允许用户在需要时添加新脚本，但是当添加新脚本时，该脚本的字符数不再起作用，即使 html 相同（除了 ID）。有没有办法更新 DOM，让它也能识别这些新的 div？

这是一个例子：

var $scriptNumber = 2;
$('.script').keyup(charCount);
$('#new-script').click(addScript);

function charCount() 
	var $chars = $(this).val().length;
	$(this).siblings('.char-count').html($chars + ' Characters');


function addScript() 
	$('#scripts').append('<div id="script-' + $scriptNumber + '-wrap" class="script-wrap"><label for="script-1">Script ' + $scriptNumber + '</label><textarea id="script-' + $scriptNumber + '" class="script" cols="40" rows="3"></textarea><span class="char-count">0 Characters</span></div>');
  $scriptNumber++;

#scripts 
  padding: 12px;

.script-wrap 
  margin-bottom: 12px;

label 
  font-weight: bold;

textarea 
  width: 100%;

#new-script 
  margin-left: 12px;
  padding: 4px 12px;
  background: purple;
  color: white;
  cursor: pointer;

#new-script:hover 
  background: blue;

<div id="scripts">
  <div id="script-1-wrap" class="script-wrap">
    <label for="script-1">Script 1</label>
    <textarea id="script-1" class="script" cols="40" rows="3"></textarea>
    <span class="char-count">0 Characters</span>
  </div>
</div>
<span id="new-script">New Script</span>

【问题讨论】：

是的。通过使用事件委托

你可以这样做：$(document).on('input', '.script', charCount);而不是这个： $('.script').keyup(charCount);并不是说我将keyup 更改为input，这比keyup 好得多。

【参考方案1】：

将$('.script').keyup(charCount); 行更改为$(document).on('keyup', '.script', charCount);。

这个问题是因为它是一个动态创建的元素而引起的。因此，我们需要将该函数附加到加载时页面上的某些内容。

这是一个有效的 JS Fiddle 示例

【讨论】：

这很好用，谢谢！