JavaScript 如何访问动态生成的resultcont容器对应按钮实现单条影片加观影清单

问题根因 #

你当前代码的核心问题是使用了全局变量id和parameter存储状态：

1. 每次搜索新电影都会覆盖全局的id值，导致点击任意Add按钮时，获取到的都是最后一次搜索的电影ID
2. 全局的parameter变量会累加所有历史搜索的电影条目，每次添加到watchlist都会把所有历史搜索结果都加进去
   另外用电影标题作为DOM ID存在风险，标题中的空格、特殊字符会导致DOM选择器失效，建议使用OMDb接口返回的imdbID作为唯一标识。

修复后的完整代码 #

var result=[];
var url = "http://www.omdbapi.com/?type=movie&apikey="+api_key;

function handle(e){
  if(e.keyCode === 13){
    $("#form1").submit(function(event){
      event.preventDefault();
    })
    var search_value = $("#search").val();
    if(search_value===""){
      alert("Please enter a movie name!")
      return
    }
    $.ajax({
      method: "GET",
      url: url+"&t="+search_value,
      success: function(data){
        // 用接口返回的imdbID作为唯一标识，避免特殊字符问题
        const movieId = data.imdbID
        const curMovieHtml = `<div class="container resultcont" data-movie-id="${movieId}">
                  <img src="${data.Poster}" class="img-thumbnail poster float-left" width="150px" height="150px"/>
                  <p>Title: ${data.Title}</p>
                  <p> Genre: ${data.Genre}</p>
                  <p> Release Date: ${data.Released}</p>
                  <p> Runtime: ${data.Runtime}</p>
                  <p>Ratings: ${data.imdbRating}</p>
                  <button class="btn btn-dark btn-block wl-add-btn" data-movie='${JSON.stringify(data)}'>Add</button>
                  </div>
                  <br>`
        result.push(curMovieHtml)
        $("#searchresultdiv").html(result)
      }
    })
  }
}

// 搜索结果页Add按钮点击事件（事件委托写法，兼容动态生成的DOM）
$('#searchresultdiv').on('click', '.wl-add-btn', function() {
  // 提取当前按钮对应的电影数据
  const curMovie = JSON.parse($(this).attr('data-movie'))
  // 隐藏搜索结果里的当前条目
  $(this).closest('.resultcont').hide()
  // 构造待加入观影清单的HTML
  const watchItem = `<div class="container resultcont" data-movie-id="${curMovie.imdbID}">
                  <img src="${curMovie.Poster}" class="img-thumbnail poster float-left" width="150px" height="150px"/>
                  <p>Title: ${curMovie.Title}</p>
                  <p> Genre: ${curMovie.Genre}</p>
                  <p> Release Date: ${curMovie.Released}</p>
                  <p> Runtime: ${curMovie.Runtime}</p>
                  <p>Ratings: ${curMovie.imdbRating}</p>
                  <button class="btn btn-dark btn-block wl-remove-btn">Remove</button>
                  </div>
                  <br>`
  // 追加到观影清单，不会覆盖之前已经添加的内容
  $("#watchlistdiv").append(watchItem)
})

// 观影清单Remove按钮点击事件
$('#watchlistdiv').on('click', '.wl-remove-btn', function() {
  const targetId = $(this).closest('.resultcont').data('movie-id')
  // 移除当前观影清单条目
  $(this).closest('.resultcont').next('br').remove()
  $(this).closest('.resultcont').remove()
  // 可选：恢复搜索结果页对应条目的显示
  $(`#searchresultdiv .resultcont[data-movie-id="${targetId}"]`).show()
})

核心修改说明 #

• 移除了全局状态变量id和parameter，避免全局状态污染导致的逻辑错乱
• 采用事件委托绑定按钮点击事件，替代原有的内联onclick写法，自动关联当前按钮对应的电影条目
• 点击Add按钮时仅提取当前条目的电影数据，追加到watchlist中，不会影响其他搜索结果
• 所有电影条目用imdbID作为唯一标识，不会出现DOM选择错误的问题

内容的提问来源于stack exchange，提问作者xBatmanx