1

JavaScript で生成されたコンテンツで jquery セレクターを使用して要素を選択する際に問題があります。

生成には、次の関数を使用します。

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

これにより、次の html がページに挿入されます。

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

ここまでは問題ありません。しかし、私が使用するとき

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

何も起こっていません。なぜこれが起こっているのか誰にも分かりますか？DOM が最初に生成されたときにアイコンがページになかったことが原因だと思います。これを回避する方法はありますか？

前もって感謝します

4

2 に答える 2

8

は動的に追加されるため、イベント デリゲーションを使用してイベント ハンドラーを登録するicon-edit必要があります。

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', 'i.icon-edit', function(event) {
    event.preventDefault();
    alert( 'editing' ); 
});
于 2013-07-01T06:19:49.590 に答える
0

jquery デリゲートを使用します。 クリック リンク

于 2013-07-01T06:20:20.777 に答える