2017-02-03 11 views
0

ボタンをクリックするとボックスを作成するプログラムを実行しています。モデルボックスを隠してボタンをクリックすると、モデルボックスがクローンされ、そのIDが変更されます。jQuery要素を選択しない

このボックスの中には、クリックするといくつかの機能が必要なリンクがありますが、jQueryはこの要素を見つけることができないようですので、リンクをクリックすると何も表示されません。

はここに私のコードです:

$('#box-' + number).find('a').click(function(){ 
    alert('boop'); //function 
}); 

変数 'number' は箱の数です。モデルボックスをクローンするとIDが変わったと私は言った。事は箱が生成される前にjQueryのDOMをロードした、ある

<div id="box-model"> 
    <div class="box"> 
     <div class="heading"> 
     <a class="link-class">¡Click Me!</a> 
     </div> 
     <div class="body"> 
     CONTENT 
     </div> 
    </div> 
</div> 
+0

これは単なるによる抽象化のレベルにまでかもしれないが、あなたが使用してより良いだろう '' ...のように、$を何かを委任するon'の(文書).on( "クリック"、 "ボックスa"、関数(){...}); '。私はあなたの例で何か間違ったことを見ることができないので、おそらくモデルからのボックスの作成は機能していません。あなたはフィドルやコードサンプルを持っていますか? –

答えて

2

動的に追加された要素にイベントを添付するには、イベントの委譲を使用する必要があります。

IDは動的に生成されるため、イベント委任でセレクタとして使用することはできません。あなたは.header内のアンカー要素をターゲットに使用するクラスセレクタをretherことができます。

$('body').on('click','.heading a',function(){ 
    alert('boop'); //function 
}); 
+0

これはうまくいきました。ありがとう!しかし、今、ユーザーがリンクをクリックするために使用するボックスをどのように認識できますか? – Juanky

+0

clickedイベントでクリックされた要素( 'this')のコンテキストを取得します。 jqueryオブジェクトに変換して、必要な処理を行うことができます。 –

-1
$("body").find('#box-' + number).find('a').click(function(){ 
    alert('boop'); //function 
}); 

モデルボックスは次のようなものです。このコードが$(document).ready(function())にあると仮定すると、文書が準備できたらボックスは生成されません。最初に生成された "#box"の親要素に移動する必要があります(ボディでなくてもかまいません)

+0

これは機能しません。あなたはイベントを委譲していません。イベントを作成した時点で存在していた要素だけにそれを添付します。これは、 'body'のような既存の要素を使用しているかどうかにかかわらずです。 [ここには例があります](https://jsfiddle.net/9f6qbnvb/2/)(このリンクには、Milind Anantwarが投稿した* Event Delegation *の解答が含まれています) – Santi