js / jquery не может получить динамически добавленные элементы

Question

Я не очень знаком с js и jquery, и у меня проблема с динамически добавляемыми элементами. Я программирую MP3-плеер js, и я получаю плейлист типа "m3u" с сервера

#dir
#dir/artist
#dir/artist/album
dir/artist/album/song.mp3
// [...]

код js вставляет его в ol:

<div data-id="container">
  <ol data-id="list">
    <li>dir</li>
    <li>artist</li>
    <li>album</li>
    <li><a href="https://localhost/[...]/dir/artist/album/song.mp3" id="title-1">song</a></li>
    <!-- [...] -->
  </ol>
</div>

---

это работает:

$('[data-id=container]').on('click', '[data-id=list] li > a', function(e) {
  /*[...] */
}); // set audio src, ...

e.target - элемент, на который я нажал

если я хочу получить к нему доступ по его идентификатору в файле js , он возвращает неопределенное значение:

console.log($('#title-1'));

возвращается:

w.fn.init {}
  __proto__: Object(0)

если я наберу $ ('# title-1') в консоли chrome dev , я получу объект:

w.fn.init [a#title-1]
  0: a#title-1
  length: 1
  __proto__: Object(0)

---

Вот код, как я создал список:

function list(file) {
  $.get(file, function(list) {
    var list = list.split('\n'); //seperate file by lines
    var empty_line = 0;
    if (list[list.length - 1] == '') { empty_line = 1; } //ignore last line
    var j = 1; //counter for #title-n
    var text = ''; //output
    for (i = 0; i < (list.length - empty_line); i++) {
      var li = list[i].split('/');
      if (list[i][0] == '#') {
        text += tabs + '<li style="padding-left:' + (li.length - 1) * 10 + 'px;">' + li.pop().replace('#', '') + '</li>\n';
      } else {
        text += tabs + '<li style="padding-left:' + (li.length - 1) * 10 + 'px;"><a href="' + server_get_title + list[i] + '" id="title-' + j + '">' + li.pop() + '</a></li>\n';
        j++;
      }
    }
    $('[data-id=list]').html(text);
  }, 'text');
}

---

Я прочитал кое-что о добавлении элементов "правильным образом", поэтому я попытался

$('[data-id=list]').append($('<li><!-- [...] --></li>'));

или

obj[i] = $('<li><!-- [...] --></li>');
$('[data-id=list]').append(obj[i]);

и доступ к элементу по

obj[1].attr('href');

но безуспешно.

---

Есть идеи как ее решить?

Спасибо

EDIT

мой вопрос не о примере "e", я хочу получить доступ к элементу, не щелкая по нему и не получая e.target таким образом.

Answer 1

РЕШЕНИЕ

эта строка создала все проблемы:

$(document).ready(function() {
  /* ... */
  list('left-playlist-list', paths[1] + uri[1], 2);
  /* ... */
  console.log($('#title-1'));
  /* ... */
});

console.log() был запущен ДО функция списка

$(document).ready(function() {
  /* ... */
  function first() {
    /* ... */
    list();
    /* ... */
  }
  function second() {
    /* ... */
    console.log($('#title-1'));
    /* ... */
  }
  // this is it
  $.ajax({
    url:first(), //call first()
    success:function(){ second(uri); } //and AFTER success call second()
  });
});

Мне пришла в голову мысль, что console.log () был запущен рано во время домашней работы, так что теперь они больше не бесполезны для меня; D

Answer 2

Некоторые <ol> - это статический элемент в вашем HTML, и это элементы <li>, которые создаются. Вы можете написать свой код, как это. Это еще один способ получить доступ к элементу, по которому был выполнен щелчок, кроме цели события.

$('[data-id=list]').on('click', 'li > a', function(e) {
  console.log(this, ' element in vanilla JS. Or this wrapped in jQuery. ', $(this));
});