Question

在列表中创建新元素后，我想在其中插入内容。我知道我可以在创建时执行此操作，但问题是我无法在创建后与元素进行交互。

＆＃13;

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++;
}

＆＃13;

<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>

＆＃13;

如果我尝试用

找到相应的元素

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

我明白了：

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

修改此外，如果我尝试将选择器更改为＆＃34; #tracklist＃5＆＃34; - 它也不起作用。

Answer 1

我认为您错过了代码中的"。使用...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>

Answer 2

您没有更改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;
}

尝试下面的一个，看看它是否解决了你的问题..

无法访问jQuery

2 个答案: