如何通过 jQuery 事件监听器获取动态数据属性

Question

我正在创建一个学习 jQuery 的简单电影应用程序，用户可以在其中查找电影标题，然后在初始搜索后获取有关特定标题的更多信息。 我需要获取数据属性“movieId”来进行第二次搜索。 这是我的代码...

                <tr class="row">
                    <td data-movieId="${movieId}">
                        <p class="movie-title"><a href="#">${movie.title}</a></p>
                        <p class="release-date">${releaseDate}</p>
                        <p>${movie.overview}</p>
                    </td> 
                    <td><img class="poster-image movie-poster" src="${posterBaseUrl + 
                        movie.poster_path}" alt=""></td>
                </tr>



                function clickOnMovieTitle() {
                   $('.content').on('click', function(event) {
                     event.preventDefault();
                     let clickedMovie = $(event.currentTarget).closest('td').data('movieId')
                     movieApiReq(clickedMovie);
                    })
                 }

clickedMovie 返回未定义。 我也尝试过 using.attr() 并得到相同的结果。 非常感谢任何帮助，谢谢。

Answer 1

假设这样的结构：

<table>
    <tbody>
      <tr class="row">
        <td data-movieId="${movieId}">
          <p class="movie-title"><a href="#">${movie.title}</a></p>
          <p class="release-date">${releaseDate}</p>
          <p>${movie.overview}</p>
        </td>
        <td><img class="poster-image movie-poster" src="${posterBaseUrl + 
                        movie.poster_path}" alt=""></td>
      </tr>
    </tbody>
  </table>

你可以这样做：

$('.row').on('click', function(event) {
    event.preventDefault();
    let td = $(event.target).closest('td')[0];
    let movieId = $(td).data('movieid');
    console.log(movieId);
  })

注意'movieid'的小写字母。