我如何捕獲哪個號碼 <div> 在我的容器內被點擊 <div> 並將其存儲在變量中

Question

編輯：因此，我的代碼都保存在$(document).ready(function() {}內，並且因為我的html代碼是動態生成在我的javascript文件中的，所以當使用.click()時遇到問題應用給出的答案

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

---

原始：我在一個頁面上有20個div元素，它們都是從ajax文件生成的.movi​​es_cell類。 所有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

可以使用.index()嗎？ 它是項集合的從零開始的索引，例如， class="movies_cell"

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

jsFiddle演示

Answer 2

使用事件委托。（ 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