Toggle eine JSON-Daten mit Click-Ereignis

Question

Ich versuche, eine Klasse auf der div block-grid__item hinzufügen, aber die Toggle-Klasse wird nicht für jedes Div funktionieren. Was vermisse ich? scheint zufällig zu arbeiten.

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(); 
 
});

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

 

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

Answer 1

Redigieren Sie einfach den Code wie dieser $('body').on('click', 'div.text', function(event) { und es wird funktionieren. Das Klickereignis wurde nicht auf die abgerufenen Elemente ausgelöst.

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>