Question

我有一个页面，用户可以将其脚本添加到表单然后提交。我正在使用.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>

Answer 1

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

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

这是一个有效的JS Fiddle示例

jQuery .append DOM更新

1 个答案: