CODEWITHSUNDEEP
javascriptjqueryhtml
yesfabime
yesfabime

Reputation: 814

Unable to access element created by jQuery

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.

Upvotes: 0

Views: 67

Answers (2)

sridhar
sridhar

Reputation: 622

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

Upvotes: 0

iplus26
iplus26

Reputation: 2637

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>

Upvotes: 3

Related Questions