0

JavaScript を使用してドキュメントに HTML を追加しています。また、この JavaScript 関数を使用して HTML にボタンを追加します。このボタンにイベントリスナーを持たせたいのですが、javascriptで追加した要素ではうまくいかないようです。これを修正することは可能ですか？

私のjs：

$('#content-overview li').on('click',function(){

            // Clear previous videos
            $('.content-overview-row').remove();

            // Insert new video
            var vimeoId = $(this).data('vimeo');            
            var html = '<li class="content-overview-row"><div class="content-overview-video"><iframe src="http://player.vimeo.com/video/'+vimeoId+'" width="950" height="534"></iframe><a id="close-video"></a></div></li>';

            // Find end of row and insert detailed view
            var nextRow = $(this).nextAll('.first-in-row:first');

            if(nextRow.is('li')){
                nextRow.before(html);   
            }
            else{
                //last row
                if($(this).hasClass('first-in-row'))
                {
                    //first item clicked in last row
                    $(this).before(html);
                }
                else{
                    $(this).prevAll('.first-in-row:first').before(html);
                }
            }           

            return false;

            $('#close-video').click(function() {
                console.log("works");
            });
    });

close-video は、私が話している閉じるボタンです。

4

1 に答える 1

2

次のように、ページのロード時に DOM に存在する要素にクリック イベントをバインドし、動的に追加された要素をデリゲートする必要があります。 

$(document).on('click', '#close-video', function() {
   ...
});

documentに最も近い要素に変更して、#close-videoまでバブルする必要がないようにする必要がありdocumentます。

また、クリック ハンドラーreturning false;の前にいる#close-videoため、コードが実行されることはありません。#content-overview liクリック ハンドラの外に移動します。

于 2013-04-26T07:22:15.957 に答える