Question

我想在每个容器后创建一个click功能。它已经奏效但不再有效。当我想创建事件时，他无法识别容器，因为在调试器中我可以看到他正在查看代码框。

 // 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的外部容器上的点击附加，并检查由＆＃34; on＆＃34;完成的目标。 jQuery中的api

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>

调用类属性不起作用

2 个答案: