js / jquery無法獲取動態添加的元素

Question

我對js和jquery不太熟悉，我對動態添加的元素有疑問。 我正在為js mp3播放器編程，然后從服務器獲取了一種“ 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文件中的 ID訪問它，則返回undefined：

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

收益：

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

如果我在chrome開發者控制台中輸入$（'＃title-1'），我得到對象：

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');

但沒有成功。

---

有什么想法如何解決嗎？

謝謝

編輯

我的問題不是關於“ e”示例的，我想訪問元素而不單擊它並以這種方式獲取e.target。

Answer 1

有些<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));
});

Answer 2

解

這行很麻煩：

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

在list函數之前觸發了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