2017-01-30 5 views
0

をクリックすることができるという、私は新しいdiv要素をクリックしDIV appenedされてい - この新しいdiv要素が示され、それをクリックすることで閉じられるように望んでいるとき、それは火を行います。jQueryの追記ではなく、添付のクラス

これは私のバイオリン

https://jsfiddle.net/foba81eb/

​​

である私はちょうどそれがクリックで閉じたいが、それは何もしないのですか?

私はここで間違っていますか?

乾杯、

ベン。

P.S - 私は(.hide時に更新フィドル

https://jsfiddle.net/foba81eb/4/

を見て)、その後、それが動作しません戻って取得します!

+0

を私はそれが可能文書の準備ができているとき、動的なコンテンツがまだ存在していないとしてこれを実行することが分かっていませんでした。コンテンツは存在させても、それを隠すようにしてください。 (CSS表示:なし) – JohnnyBizzle

+0

代わりに '$(document).on(" click "、" #closingCross "、function(){..'と書いてください) – Mohammad

答えて

1

HTML:

<div class="one"> 
<p> 
hello world 
</p> 
<p id='closingCross' style="display:none">X</p> 

</div> 

JS:

$(document).ready(function(){ 


var counter=0; 

$('.one').click(function() { 
if(counter <= 0){ 
    $('p').show(); 
    counter++; 
} 
}); 

$('#closingCross').click(function() { 
    alert("hello"); 
}); 


}); 
1

delegated event handlerを使用してください。

変更:

$('#closingCross').click(function() { 

へ:

$(document).on('click', '.closingCross', function(e) { 

スニペット:

$(document).on('click', '.closingCross', function(e) { 
 
    console.log("hello"); 
 
}); 
 

 

 
$(document).ready(function(){ 
 

 
    var counter=0; 
 

 
    $('.one').click(function() { 
 
    if(counter <= 0){ 
 
     $('p').append("<p class='closingCross'>X</p>"); 
 
     counter++; 
 
    } 
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="one"> 
 
    <p> 
 
     hello world 
 
    </p> 
 

 

 
</div>

+0

私の更新バージョンを見てください - https://まだ助けを!乾杯を再開して問題を抱えてjsfiddle.net/foba81eb/4/! – user3502952

+0

user3502952 @あなたが再開のために何をつもりか説明してもらえます? – gaetanoM

+0

を自分のサイトのためのオーバーレイメニューシステムを作成します。ユーザーは、ハンバーガーのアイコンをクリックすると、 – user3502952

0

すべてを行う必要がある追加イベントをDOM内の既に作成された要素に追加します。

$('#topp').on('click', 'p', function() { 
    alert("hello"); 
}); 

あなたの作業例: https://jsfiddle.net/foba81eb/4/

関連する問題