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 来访问它，则返回未定义：

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

返回：

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

如果我在chrome dev 控制台中键入$（'＃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'));
  /* ... */
});

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

js / jquery无法获取动态添加的元素

编辑

2 个答案:

解决方案