Calling class attribute not working

Question

I want to create after every container a click function. It had worked but not anymore. When I want to create the event, he don't recognize the container because in debugger I can see he's going over the box of code.

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

Are you waiting for the document to be [**ready**](http://learn.jquery.com/using-jquery-core/document-ready/) before executing this? — blex, Feb 20 '15 at 11:10
Nowp, I want to create in a loop for every container a click function. In debugger I can see he's not entering the function and not executing the loadPub line, how can I change the first method so he enters the function? — Timvdb92, Feb 20 '15 at 12:30

score 0 · Answer 1 · answered Feb 20 '15 at 11:11

0

http://api.jquery.com/on/ this will help you. Basically attach the click on the outer container of the div or box you dynamically create and check the target which is done by "on" api in jQuery

answered Feb 20 '15 at 11:11

Deepak David

147
6

aug · Answer 2 · 2015-02-20T18:06:48.940

If you are loading these elements dynamically, you'll want to use the .on and delegate events so that elements loaded after the DOM has loaded will know to attach click handlers.

Below is an example of me using the .on(). I declare my parent container in the selector and the specific elements I want to delegate event listeners to. In this case, I can specify the pseudo-class :first and jQuery is smart enough to know to only do it to the first element.

$(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>

It's in a loop so I want to apply the click function only for that current .container — Timvdb92, Feb 20 '15 at 12:07

Calling class attribute not working

2 Answers2