Атрибут класса вызова не работает

Question

Я хочу создать после каждого контейнера функцию щелчка. Это сработало, но не больше. Когда я хочу создать событие, он не распознает контейнер, потому что в отладчике я вижу, что он перебирает коробку кода.

// Decide list order, load the thumbnail for each publication. 
      var place = "first"; 

      $('#archive').prepend('<div class="container" id="'+entry.publicationID+'"></div>'); 
      $('.container:' + place).append('<div class="thumb"></div>'); 

      $('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')'); 
      $('.thumb:' + place).css("filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod="scale")'); 
      $('.thumb:' + place).css("-ms-filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod="scale")'); 

      // Load the publication title below each thumbnail. 
      $('.thumb:' + place).after('<div class="title"></div>'); 
      $('.title:' + place).append(entry.publicationName); 

      // Load the publication startsdate & enddate. 
      $('.title:' + place).after('<div class="date"></div>'); 
      $('.date:' + place).append(sdate + " tot " + edate); 

      // Set up publication links. 
      $('.container:' + place).click(function(){ 
       loadPub(entry.publicationID, entry.publicationName); 
       setActive(entry.publicationID); 
       //Change css of current element   
      });  

Answer 1

http://api.jquery.com/on/ это поможет вам. В основном прикрепите клик к внешнему контейнеру div или box, который вы динамически создаете, и проверьте цель, которую выполняет «on» api в jQuery

Answer 2

Если вы загружаете эти элементы динамически, вы хотите использовать .on и делегировать события, чтобы элементы, загруженные после загрузки DOM, знали, чтобы прикреплять обработчики кликов.

Ниже приведен пример использования меня с помощью .on(). Я объявляю свой родительский контейнер в селекторе и конкретных элементах, для которых я хочу делегировать прослушиватели событий. В этом случае я могу указать псевдокласс :first, а jQuery достаточно умен, чтобы знать, только для первого элемента.

$(document).ready(function(e) { 
 
    for (var i = 0; i < 10; i++) { 
 
    $('#container').append('<div class="element">Element ' + i + '</div>'); 
 
    } 
 

 
    $('#container').on('click', ':first', function(e) { 
 
    alert('hello! this should only work on the first element!'); 
 
    }); 
 
});

.element { 
 
    height: 50px; 
 
}

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

 
</div>