无法访问jQuery创建的元素

Question

After the creation of a new element in my list, I want to insert content into it. I know I could do this while creating, but the problem is that I cannot interact with the element after creation.

 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> 

If I try to find the respective element with

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

I get this:

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

EDIT: Also, if I try to change the selector to "#tracklist #5" - it doesn't work either.

Answer 1

I think you've missed a " in your code. Use ...id=\\"" + instead of ...id=" + . To avoid that, I recommend to use both single quotations ' and double quotations " in the code like:

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

After altering that, you can add items from newtrack_information to your list.

 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

You are not changing the value of buttoncounter. It will always insert your values into the same 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;
}

Try the below one see if it is solving your problem..