Question

这里是新的，希望有所帮助。我正在开发一个项目，并在其中创建了一些具有动态生成的ID的元素，但无法定制现有代码来处理动态ID。这是我的HTML：

这是我的工作JS脚本：

 $('#headline1').keyup(updateCount).keydown(updateCount);
  document.getElementById("headline1").addEventListener("change", updateCount);

 function updateCount() {
    var cs = $(this).val().length;
    $('#countHeadline1').text(cs);
    cs = $(this).val();
    $('#headlineText1').text(cs);
  }

这是我在其他解决方案中尝试过的方法，但似乎无济于事：

var c = 1,
var headline1 = "headline1" + c;
var countHeadline1 = "countHeadline1" + c;
var headlineText1 = "headlineText1" + c;
$('#' + headline1).keyup(updateCount).keydown(updateCount);
 document.getElementById("headline1" + c).addEventListener("change", updateCount);

function updateCount() {
   var cs = $(this).val().length;
   $('#' + countHeadline1).text(cs);
   cs = $(this).val();
   $('#' + headlineText1).text(cs);
 }
 c += 1;

谢谢

编辑：这是单击按钮创建元素的代码：

jQuery('#add').on('click', function() {
  c += 1;
  jQuery('#parent').append('<hr><div>Headline 1:<br /><div><INPUT TYPE="text" placeholder="Headline" onkeydown="javascript:stripspaces(this)" id="headline1'+ c +'" maxlength="30" style="width: 350px;float:left;min-height: 32px;"><span id="countHeadline1'+ c +'" class="adCounter" style="color: rgb(255, 255, 255);float:left;position: inherit;margin-left: 0px;">0</span></div></div>');
});

Answer 1

好的，在完成编辑后，看到您完全控制了所生成的HTML，我绝对建议您不要使用ID。可能最简单的方法是将类添加到headline和headlineText元素中并使用它们。

因此，首先，在将它们添加到点击处理程序中时，将它们添加到需要它们的元素中：

<INPUT TYPE="text" placeholder="Headline" onkeydown="javascript:stripspaces(this)" id="headline1'+ c +'" maxlength="30" style="width: 350px;float:left;min-height: 32px;" class="headline">

<span id="headlineText1'+ c +'" class=headline-text>

然后，您可以使用headline类将所有元素的更改事件绑定（只要您绑定到{，就不必绑定到keyup和keydown {1}}）：

change

然后，您可以使用jQuery的$(".headline").change(updateCount);方法更新计数，并使用next和parent方法更新文本：

find

这对要添加的HTML的结构进行了一些假设，但是如果您需要更改该结构，则只需对该代码进行少量更改即可使用。

Answer 2

我知道使用ID似乎是一种direct定位元素的方法，但是随着您不断向应用程序/页面添加内容或元素，它的使用可能会越来越复杂，因此请尝试将html视为结构化的可以具有“样式”或“模板”的元素集，例如：

<div class="headline">
  <input type="text">
  <span class="headlineCount">0</span>
  <span class="headlineText">Text</span>
</div>

牢记这一点，让我们检查一下将JavaScript与HTML结合使用的一些重要概念，这使jQuery大大简化了

您可以以tree的形式遍历HTML，并带有父母和子女的叶子（您可能需要阅读this）
您可以使用多个ID来选择元素（您可能需要阅读this）。
与HTML输入交互触发事件（您可能需要阅读this）

使用html作为上述内容，您可以使用以下代码：

<div class="headline">
  <input type="text" value="One">
  <span class="headlineCount">0</span>
  <span class="headlineText">Headline One</span>
</div>
<div class="headline">
  <input type="text" value="Two">
  <span class="headlineCount">0</span>
  <span class="headlineText">Two</span>
</div>

两组headline类，每组包含输入字段，计数数字和文本。

使用jQuery，您可以使用如下代码：

function update () {
    var inputElement = this
    $(inputElement).nextAll('.headlineCount').text(inputElement.value);
    $(inputElement).nextAll('.headlineText').text(inputElement.value);
}    
jQuery('.headline input').on('change', update)

基本上读为：

jQuery('.headline input').on('change', update)

对于类input中任何元素内的所有headline元素，请使用change函数附加一个update事件监听器。

function update () {
    var inputElement = this
    $(inputElement).nextAll('.headlineCount').text(inputElement.value);
    $(inputElement).nextAll('.headlineText').text(inputElement.value);
}

update函数在触发时将收到<input>元素作为“上下文”（ CHECK NOTE ），而this“变量”将引用它。

然后使用jQuery我们做

$(inputElement).nextAll('.headlineCount').text(inputElement.value);

这意味着：从input元素开始，查找所有 AFTER 类为headlineCount的元素，并将其文本更改为input元素的value。 / p>

我希望这个小小的解释足以使您入门，实际上您已经开始处理一些前端开发的最重要概念，请不要停止引用Mozilla文档站点（MDN）的精彩之处。

注意：this关键字是一个较高级的主题，首先，我强烈建议将其视为“上下文”引用。但是请确保也在MDN中对其进行检查！

编辑：现在带有实时演示：https://jsfiddle.net/3w7t1bhm/

Answer 3

另一种选择是将Event Delegation用于动态创建的元素。

另一种方法是功能data-attributes和功能$data一起存储有用的信息，在这种情况下，该信息存储所创建元素的当前id。

此外，此方法使用CSS类inputs来标识文本字段，并绑定事件input来执行功能updateCount，以对那些文本字段进行任何更改。

function updateCount() {
  var identifier = $(this).data('identifier'); //'data attribute' along with function 'data'.
  $('#countHeadline1' + identifier).text($(this).val().length);
  $('#headlineText1' + identifier).text($(this).val());
}

var c = 1;
$('#add').on('click', function() {
  c += 1;
  $('#parent').append('<br><br><br>Headline ' + c + ':<br /><INPUT TYPE="text" class="inputs" data-identifier="' + c + '" placeholder="Headline" id="headline1' + c + '" maxlength="30" style="width: 350px;float:left;min-height: 32px;"/><span id="countHeadline1' + c + '" class="adCounter" style="color: rgb(0, 0, 0);float:left;position: inherit;margin-left: 0px;">0</span><br><span id="headlineText1' + c + '" class="headLine" style="color: rgb(0, 0, 0);float:left;position: inherit;margin-left: 0px;">0</span>');
});

$('#parent').on('input', '.inputs', updateCount); // Event delegation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
  Headline 1:
  <br>
  <INPUT class='inputs' TYPE="text" data-identifier='1' placeholder="Headline" id="headline11" maxlength="30" style="width: 350px;float:left;min-height: 32px;" />
  <span id="countHeadline11" class="adCounter" style="color: rgb(0, 0, 0);float:left;position: inherit;margin-left: 0px;">
      0
    </span><br>
    <span id="headlineText11" class="headLine" style="color: rgb(0, 0, 0);float:left;position: inherit;margin-left: 0px;">
      0
    </span>
</div><br>
<button id='add'>Add</button>

重要：我已删除了此onkeydown="javascript:stripspaces(this)"，因此您需要确定在何处调用该函数。

使用jQuery和Javascript获取动态生成的ID

3 个答案: