javascript - 我如何捕获在我的容器 <div> 中点击了哪个数字 <div> 并将其存储在变量中

Question

编辑:因此，我的代码全部保存在 $(document).ready(function() {} 中，并且因为我的 html 代码是在我的 javascript 文件中动态生成的，在应用给出的答案时，我在使用 .click() 时遇到问题

$('.movies_cell').click(function(){
    var tmp = $(this).index();
});

---

原文: 我在一个页面上有 20 个 div 元素，它们都是从 ajax 文件生成的。所有 div 都在名为 #movies 的容器 div 中创建。

可以单击任何 .movi​​es_cell div 以显示模式框，因为我将根据单击的内容将我的 json 文件中的信息放入该模式我需要知道单击了哪个 div，例如，如果它是第 5 个 div，我想知道第 5 个 div 被单击，然后将该数字存储在一个变量中，如果它是第 2 个或第 3 个，我希望将该数字存储在一个变量中，然后在另一个 .movi​​es_cell 时清除div 被点击。

我将如何编写 javascript 或 jquery 脚本来完成此任务？ :(

谢谢!

  $('#myMovies').click(function () {
      $.getJSON('data/movies.json', function (allData) {
          $.each(allData, function (i, field) {
              $('#movies').append(function () {
                  var movies = '<div class="movies_cell">';
                  movies += '<div class="movies_image">';
                  movies += '<a href="#openModal"><img src="img/movies/' + (field.image) + '" alt="' + (field.name) + ' Poster" style="width: 100%; height: 100%"></a>';
                  movies += '</div>';
                  movies += '<div class="movies_detail">';
                  movies += '<a href="#openModal"><h1>' + (field.name) + '</h1></a>';
                  movies += '<img src="img/rating/' + (field.myRating) + '.png" alt="movie rating" style="margin: auto;">';
                  movies += '</div>';
                  movies += '</div>';
                  counter++;
                  console.log(counter);
                  return movies;
              });
          });
      });
  });

Answer 1

使用事件委托(delegate)。( https://api.jquery.com/on#direct-and-delegated-events ) 在顶部

 $('#movies').on( "click", ".movies_cell > div", function() {
   var tmp = $(".movies_cell > div").index(this);
   console.log(tmp);
});

然后

 $('#myMovies').click(function () {
//rest of code