閉じるボタンは1つの関数にjqueryのを動作しません

Question

閉じるボタンは1つの関数に

をjqueryのを動作しません私はjqueryの中で行われ、次のモーダルを持って、私は、クローズボタンをクリックの問題を解決するには、いくつかの方法を試してみました私はそれを働かせることはできません。

ご意見やご提案はありますか？

LINK：http://jsfiddle.net/wx0wvh9L/

のjQuery：

(function($) { 
    $.fn.modalBox = function($custom) { 
    var name = "box-modal", 
     custom = ($custom == null) ? "" : $custom; 

    $(this).on('click', function(e) { 
     e.preventDefault(); 
     var link = $(this).data("modal"), 
     iframe = '<div class="' + name + ' ' + custom + '">' + 
     '<iframe src="' + link + '" frameborder="0" allowfullscreen></iframe>' + 
     '<div class="close"></div>' + 
     '</div>'; 
     $("body").append(iframe); 
     $("." + name).fadeIn(350); 
    }); 

    $(".close").on('click', function(e) { 
     e.preventDefault(); 
     $("." + name).hide(); 
    }); 
    }; 
}(jQuery)); 

$(".modal-video").modalBox(); 

HTML：

<div class="modal-video" data-modal="https://www.youtube.com/embed/P2x3-b6JEj8?rel=0&amp;showinfo=0&amp;autoplay=1"> 
    Test Click 
</div> 

Answer 1

代わり

$("body").on('click','.box-modal .close', function(event){ 
    event.preventDefault(); 
    $("." + name).hide(); 
}); 

をお試しください

問題は、定義したときに$('.close')が存在しないという問題があります。クリックした後は「存在する」だけです。また、代わりにonclickメソッドの内部に配置することもできます。これは私が言ったように

は、あなたもそう

$(this).on('click', function(e) { 
     e.preventDefault(); 
     var link = $(this).data("modal"), 
     iframe = '<div class="' + name + ' ' + custom + '">' + 
     '<iframe src="' + link + '" frameborder="0" allowfullscreen></iframe>' + 
     '<div class="close"></div>' + 
     '</div>'; 
     $("body").append(iframe); 
     $("." + name).fadeIn(350); 
     $(".close").on('click', function(e) { 
     e.preventDefault(); 
     $("." + name).hide(); 
     }); 
    }); 

ようonclickの方法の中に置くことができます... JavaScriptでスコープによるものです