使用click事件切换Json数据

Question

我试图在div block-grid__item上添加一个类，但是切换类不会对每个div工作。我错过了什么？似乎随机工作。

＆＃13;

＆＃13;

var module = {

  init: function() {
    this.onClick();
    this.onSubmit();
  },

  onClick: function() {
    $('div.text').on('click', function(event) {
      $(this).closest(".block-grid__item").toggleClass('active');
    });
  },

  onSubmit: function() {

    var apiBase = "https://hacker-news.firebaseio.com/v0/";
    var container = document.querySelector('#latest');
    var el, title, url;

    fetch(apiBase + 'askstories.json')
      .then(function(response) {
        return response.json();
      })
      .then(function(json) {
        return json.slice(0, 16);
      })
      .then(function(ids) {
        ids.forEach(function(id, i) {
          fetchItem(id);

        });
      })
      .catch(function(err) {
        console.log(err);
      });



    function fetchItem(id) {
      var item = apiBase + 'item/' + id + '.json';

      fetch(item)
        .then(function(response) {

          return response.json();
        })
        .then(function(json) {
          console.log(json);
          score = json.score;
          title = json.title;
          author = json.author;
          text = json.text;
          type = json.type;
          by = json.by;
          url = json.url;
          el = document.createElement("div");
          el.className = 'block-grid__item';
          el.id = json.id;
          el.innerHTML = `<ul class="xs-border"><li><a href="${url}" class="anchor"><h4 class="title">${title}</h4></a> <div class="text">${text}</div> <span class="by">${by}</span><span class="score">${score}</span></li></ul>`;
          container.appendChild(el);
          module.onClick();
        })
        .catch(function(err) {
          console.log(err);
        });
    }







  }


}



$(document).ready(function() {
  module.init();
});

＆＃13;

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


      <div id="latest">
      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需像这样$('body').on('click', 'div.text', function(event) {编辑代码即可。点击事件未在获取的元素上触发。

var module = {

  init: function() {
    this.onClick();
    this.onSubmit();
  },

  onClick: function() {
    $('body').on('click', 'div.text', function(event) {
      $(this).closest(".block-grid__item").toggleClass('active');
    });
  },

  onSubmit: function() {

    var apiBase = "https://hacker-news.firebaseio.com/v0/";
    var container = document.querySelector('#latest');
    var el, title, url;

    fetch(apiBase + 'askstories.json')
      .then(function(response) {
        return response.json();
      })
      .then(function(json) {
        return json.slice(0, 16);
      })
      .then(function(ids) {
        ids.forEach(function(id, i) {
          fetchItem(id);

        });
      })
      .catch(function(err) {
        console.log(err);
      });



    function fetchItem(id) {
      var item = apiBase + 'item/' + id + '.json';

      fetch(item)
        .then(function(response) {

          return response.json();
        })
        .then(function(json) {
          console.log(json);
          score = json.score;
          title = json.title;
          author = json.author;
          text = json.text;
          type = json.type;
          by = json.by;
          url = json.url;
          el = document.createElement("div");
          el.className = 'block-grid__item';
          el.id = json.id;
          el.innerHTML = `<ul class="xs-border"><li><a href="${url}" class="anchor"><h4 class="title">${title}</h4></a> <div class="text">${text}</div> <span class="by">${by}</span><span class="score">${score}</span></li></ul>`;
          container.appendChild(el);
          module.onClick();
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  }
}


$(document).ready(function() {
  module.init();
});

.active {
  background: #ff0;
}

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


<div id="latest">
</div>