如何訪問創建 html 後附加的列表元素

游泳巴伊

我正在使用 jQuery 中的 append 函數添加一個列表元素，如何在我的 onclick 函數中引用它？下面是我的代碼

$(function() {

  let $movies = $('#showList')
  let $m = $('#show')
  $.ajax({
    method: 'GET',
    url: 'http://api.tvmaze.com/shows',
    success: function(movies) {
      $.each(movies, function(i, movie) {
        $movies.append('<li id="list"><a href="">' + movie.name + '</a></li>')
      })
    }

  })

});

$('#list').on('click', 'a', function(event) {
  console.log('here');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<h1 id='bruh'>TV Shows</h1>
<ul id="showList"></ul>
<div id="show"></div>
<form id="searchForm">
  <input type="text" id="search_term">
  <label for="text">Search</label>
  <button>Submit</button>
</form>
<a id="homelink" href="#" hidden>Back to All Shows</a>

當我單擊鏈接時，控制台中沒有消息。

馬蒙

屬性id在文檔中應該是唯一的，您可以使用class代替。

試試$('body').on('click', '.list a', function(event){...。

演示：

$(function() {

  let $movies = $('#showList')
  let $m = $('#show')
  $.ajax({
    method: 'GET',
    url: 'http://api.tvmaze.com/shows',
    success: function(movies) {
      $.each(movies, function(i, movie) {
        $movies.append('<li class="list"><a href="">' + movie.name + '</a></li>')
      })
    }

  })

});

$('body').on('click', '.list a', function(event) {
  console.log('here');
  event.preventDefault();//stay on the same page
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<h1 id='bruh'>TV Shows</h1>
<ul id="showList"></ul>
<div id="show"></div>
<form id="searchForm">
  <input type="text" id="search_term">
  <label for="text">Search</label>
  <button>Submit</button>
</form>
<a id="homelink" href="#" hidden>Back to All Shows</a>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。