jquery - 如何获取按钮功能的 "data-name"属性？

Question

正文:

电影搜索

<!-- Movies will get dumped here -->
<div id="movies-view"></div>

<form id="movie-form">
  <label for="movie-input">Add a Movie Bro</label>
  <input type="text" id="movie-input">
  <br>

  <!-- Button triggers new movie to be added -->
  <input id="add-movie" type="submit" value="Add a Movie Bro">
</form>
<div id="movie-view"></div>

Javascript:

  var movies = ["The Matrix", "The Notebook", "Mr. Nobody", "The Lion King"];
  function renderButtons() {

    $("#movies-view").empty();
    for (var i = 0; i < movies.length; i++) {

      var a = $("<button>");

      a.addClass("movie");

      a.attr("data-name", movies[i]);

      a.text(movies[i]);

      $("#movies-view").append(a);

    }

  }
  // This function handles events where the add movie button is clicked
  $("#add-movie").on("click", function(event) {
    event.preventDefault();
    var movie = $("#movie-input").val();
    movies.push(movie);
    renderButtons();
    var queryURL = "https://www.omdbapi.com/?t=" + movie + "&y=&plot=short&apikey=trilogy";

     $.ajax({
      url:queryURL,
      method: "GET"
    }).then(function(response){
        $("#movie-view").text(JSON.stringify(response));

    })
  });

  $(".movie").on("click", function(event){
        var film = $(".movie").attr("data-name");

        var queryURL = "https://www.omdbapi.com/?t=" + film + "&y=&plot=short&apikey=trilogy";

        $.ajax({
        url:queryURL,
        method: "GET"
        }).then(function(response){
          $("#movie-view").text(JSON.stringify(response));

        })
  });
  renderButtons();

//我希望“电影 View ”div 上的电影数据在点击电影标题按钮后出现，而不是“添加电影兄弟”按钮。但我不知道如何将“data-name”属性添加到“.movi​​e”按钮。我的主要问题是如何正确写出变量“film”。需要进入其中什么才能得到我正在寻找的东西？看起来一切都很好，但是

Answer 1

您可以使用 $(".movi​​e").on("click", function(event) { }) ...但请注意，您需要包装您的 .on() 函数位于 $(document).ready(function() { }) 中，因为四个初始元素是在 DOM 准备好之前创建的。您还需要使用诸如 $("body").on("click", ".movi​​e", function(event) { }) 之类的事件委托(delegate)，以便能够触发动态添加的按钮的单击。

这可以在以下情况中看到:

var movies = ["The Matrix", "The Notebook", "Mr. Nobody", "The Lion King"];

function renderButtons() {
  $("#movies-view").empty();
  for (var i = 0; i < movies.length; i++) {
    var a = $("<button>");
    a.addClass("movie");
    a.attr("data-name", movies[i]);
    a.text(movies[i]);
    $("#movies-view").append(a);
  }
}

// This function handles events where the add movie button is clicked
$("#add-movie").on("click", function(event) {
  event.preventDefault();
  var movie = $("#movie-input").val();
  movies.push(movie);
  renderButtons();
});

$(document).ready(function() {
  $("body").on("click", ".movie", function(event) {
    var film = $(this).attr("data-name");
    var queryURL = "https://www.omdbapi.com/?t=" + film + "&y=&plot=short&apikey=trilogy";
    $.ajax({
      url: queryURL,
      method: "GET"
    }).then(function(response) {
      $("#movie-view").text(JSON.stringify(response));
    })
  });
});

renderButtons();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Movies will get dumped here -->
<div id="movies-view"></div>

<form id="movie-form">
  <label for="movie-input">Add a Movie Bro</label>
  <input type="text" id="movie-input">
  <br>

  <!-- Button triggers new movie to be added -->
  <input id="add-movie" type="submit" value="Add a Movie Bro">
</form>
<div id="movie-view"></div>