JQuery - Use selectors on generated content

Question

I'm having problems selecting elements with jquery selectors on content generated with javascript.

For the generation I use the following function:

var articles = [
    {
        img: { src: this.base_url + 'assets/img/frontend/placeholder.png', alt: 'Image Description' },
        title : 'Title Here',
        text: 'Lorem ipsum dolor sit amet, consectetur adispiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ' + 
              'dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.'
    },
    {
        img: { src: this.base_url + 'assets/img/frontend/placeholder.png', alt: 'Image Description' },
        title : 'Title Here',
        text: 'Lorem ipsum dolor sit amet, consectetur adispiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ' + 
              'dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.'
    },
    {
        img: { src: this.base_url + 'assets/img/frontend/placeholder.png', alt: 'Image Description' },
        title : 'Title Here',
        text: 'Lorem ipsum dolor sit amet, consectetur adispiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ' + 
              'dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.'
    }
];

var template = Handlebars.compile( $( '#picture-above-text' ).html() );
$( 'div.editor-wrapper' ).append( template( articles ) );

This inserts the following html in the page :

<div class="row insumo-editor-module" style="display: none;">
    {{#each this}}
        <article class="span4" article-tile>
            <figure>
                <div class="figure-holder">
                    <img src="{{img.src}}" alt="{{img.alt}}">
                    <span class="figure-indicator"></span>
                </div>
                <figcaption>
                    <div class="editable"><h4>{{title}} <i class="icon-edit"></i></h4></div>
                    <div class="editable"><p>{{text}} <i class="icon-edit"></i></p></div>
                </figcaption>
            </figure>
        </article>
    {{/each}}
</div>

Up to this point there are no problems. However when I use

$( 'i.icon-edit' ).on( 'click', function() {
    alert( 'editing' );
});

nothing is happening. Does anyone know why this is happening? I guess it's because the icon wasn't on the page when the DOM was first generated. Is there any way around this?

Thanks in advance

possible duplicate of [Jquery .on() not working on dynamic content](http://stackoverflow.com/questions/15090942/jquery-on-not-working-on-dynamic-content) — Denys Séguret, Jul 01 '13 at 06:18
try to attach `click` after this line: `$( 'div.editor-wrapper' ).append( template( articles ) );` — Ivan Chernykh, Jul 01 '13 at 06:29
possible duplicate of [How to create click event for specific link in a jQuery listview.](http://stackoverflow.com/questions/17301307/how-to-create-click-event-for-specific-link-in-a-jquery-listview) — Omar, Jul 02 '13 at 10:22

score 8 · Accepted Answer · answered Jul 01 '13 at 06:19

8

Since the icon-edit is added dynamically, you need to use event delegation to register the event handler

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', 'i.icon-edit', function(event) {
    event.preventDefault();
    alert( 'editing' ); 
});

answered Jul 01 '13 at 06:19

palaѕн

72,112
17
116
136

1

Great thanks for the answer. It works perfectly. @dystroy: thank you, sorry I didn't find the article you linked to, I looked before asking but didn't find that article – xonorageous Jul 01 '13 at 07:03

score 0 · Answer 2 · answered Jul 01 '13 at 06:20

0

Use jquery delegate. Klik link

answered Jul 01 '13 at 06:20

elrado

4,960
1
17
15

JQuery - Use selectors on generated content

2 Answers2

Linked