javascript - 使用 jQuery 和 Javascript 获取动态生成的 id

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>');
});

标签： javascriptjquery

Answer 1

另一种方法是对动态创建的元素使用事件委托。

另一种方法是存储有用信息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>

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