无法访问jQuery创建的元素

Unable to access element created by jQuery

本文关键字：元素 创建 jQuery 访问      更新时间：2023-09-26

在我的列表中创建一个新元素后，我想在其中插入内容。我知道我可以在创建时这样做，但问题是创建后无法与元素交互。

var buttoncounter = 5;
for (i = 0; i <= (newtrack_information.length - 1); i++) {
  $("#tracklist").append("<li class='"ui-state-default ui-sortable-handle'"><span><a id=" + buttoncounter + "'" href='"#'"></a></span></li>");
  $("#" + buttoncounter).html(newtrack_information[i].trackname + " - " + newtrack_information[i].artist);
  buttoncounter++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol id="tracklist">
  <li class="ui-state-default"><span><a id="0" href="#"></a></span>
  </li>
  <li class="ui-state-default"><span><a id="1" href="#"></a></span>
  </li>
  <li class="ui-state-default"><span><a id="2" href="#"></a></span>
  </li>
  <li class="ui-state-default"><span><a id="3" href="#"></a></span>
  </li>
  <li class="ui-state-default"><span><a id="4" href="#"></a></span>
  </li>
</ol>

如果我试图用找到相应的元素

console.log($(document.body).find("#" + buttoncounter));

我得到这个：

[prevObject: m.fn.init[1], context: body, selector: "#tracklist #5"]

编辑：此外，如果我试图将选择器更改为"#tracklist#5"，它也不起作用。

我认为您的代码中遗漏了一个"。使用...id='"" +而不是...id=" +。为了避免这种情况，我建议在以下代码中同时使用单引号'和双引号"：

  $('#tracklist').append('<li class="ui-state-default ui-sortable-handle"><span><a id="' + buttoncounter + '" href="#"></a></span></li>');

更改后，您可以将newtrack_information中的项目添加到您的列表中。

var buttoncounter = 5;
var newtrack_information = [
  {trackname: 1, artist: 'bob' },
  {trackname: 2, artist: 'jason' },
]
for (i = 0; i <= (newtrack_information.length - 1); i++) {
  $("#tracklist").append("<li class='"ui-state-default ui-sortable-handle'"><span><a id='"" + buttoncounter + "'" href='"#'"></a></span></li>");
  $("#" + buttoncounter).html(newtrack_information[i].trackname + " - " + newtrack_information[i].artist);
  buttoncounter++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol id="tracklist">
  <li class="ui-state-default"><span><a id="0" href="#"></a></span>
  </li>
  <li class="ui-state-default"><span><a id="1" href="#"></a></span>
  </li>
  <li class="ui-state-default"><span><a id="2" href="#"></a></span>
  </li>
  <li class="ui-state-default"><span><a id="3" href="#"></a></span>
  </li>
  <li class="ui-state-default"><span><a id="4" href="#"></a></span>
  </li>
</ol>

您没有更改buttoncounter的值。它将始终将您的值插入相同的id中。

var buttoncounter = 5;
for (i = 0; i <= (newtrack_information.length - 1); i++) {
  $("#tracklist").append("<li class='"ui-state-default ui-sortable-handle'"><span><a id=" + buttoncounter + "'" href='"#'"></a></span></li>");
  $("#" + buttoncounter).html(newtrack_information[i].trackname + " - " + newtrack_information[i].artist);
  buttoncounter = buttoncounter - 1;
}

试试下面的一个，看看它是否能解决你的问题。。

相关文章：