Using .trigger() on a dynamically created element

Question

I'm trying to trigger a click event on a dynamically created element. I have used .on() to bind the click events, but it seems that the trigger method is firing before the element is created. I have tried triggering the click in several locations and nothing seems to work. Any help would be appreciated. I'm trying to trigger a click on the first span that is created using $('container:first-child').trigger('click');

displayThumbnails = function() {

        $(photoArray).each(function(index) {
            var thumbnailImg = this.SmallImageUrl,
            largeImg = this.LargeImageUrl,
            thumbnailId = 'thumbnail' + index,
            largeImgId = 'image' + index;

            if(index > indexCount) {
                return false;
            } else if (index >= indexStartValue && index <= indexCount) {

                $(thumbContainer).append(
                    '<span class="thumbnail" id="' + thumbnailId + '"><img height="45px" width="60px" src="' + thumbnailImg + '"/></span>'
                );

                $(thumbContainer).on('click', '#' + thumbnailId, function(){
                    $(thumbContainer).find('.active').removeClass('active');
                    $(this).addClass('active');
                    $('#displayed-image').attr('src', largeImg);
                });
            }
        });
    };

I don't see the trigger in your code but you would want to use .on() to bind the click event to your element, and make sure that the trigger call to the click event is fired in the callback of the element being added or some other time once you're certain it exists in the DOM. — j08691
– j08691, Commented Mar 21, 2012 at 20:19
This is what I assumed the issue was, but the problem is that I need it to somehow be attached to the above function. This function is called several times, and I'm trying to use the trigger to populate the #display-image div every time a new set of images is loaded. — user699242
– user699242, Commented Mar 21, 2012 at 20:36

user699242 · Accepted Answer · 2012-10-05 21:44:32Z

2

Months later, I'm revisiting this. The answer IMO these days is that triggering a click in order to have a subsequent function call is too interdependent. If you are trying to trigger a click to make something happen on your page, you are probably thinking about it the wrong way. I ended up rethinking this and had a function that handled loading the large image on its own. Basically, I was trying to trigger the click to load an image.

By rethinking the process, I ended up with much cleaner code - everything working independently to handle a small function.

Also, the reason that I never accepted the other two answers is that .on() is the way to go for binding event handlers in jQuery as of 1.7.1.

answered Oct 5, 2012 at 21:44

user699242

1,8434 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alejandro B. · Accepted Answer · 2012-03-21 20:20:43Z

0

I think what may be failing is the binding between the new control and your trigger function. Try using "live" in stead of "on"

$(thumbContainer).live('click', ...)

answered Mar 21, 2012 at 20:20

Alejandro B.

5,1302 gold badges37 silver badges64 bronze badges

Comments

James · Accepted Answer · 2012-03-21 21:19:05Z

0

If the element is created after .on is called then it won't have the event bound to it.

As @AlejoBrz mentioned you can try using .live but you could also look at the .delegate function as that could work depending on your situation too.

[edit] Just realised that .on is exactly the same as .delegate when used as you have. So on second thoughts seeing as you are binding an event just after creation of the element maybe you could just replace the .on line with this:

$('#' + thumbnailId).bind('click', function () { // the rest of your code here

I should note that this solution won't scale very well as the number of thumbnails grows.

edited Mar 21, 2012 at 21:19

answered Mar 21, 2012 at 20:57

James

1191 silver badge5 bronze badges

Collectives™ on Stack Overflow

Using .trigger() on a dynamically created element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related