生成された要素のクリックを検出するにはどうすればよいですか？

Question

私はJSONデータから要素のグループを作ってるんだ： 例：

{ 
'name':'form', 
'elements':[ 
{'name':'bt1','type':'button','value':'hello','order':'1'}, 
{'name':'img1','type':'image','value':'http://www.images.com/img.jpg','order':'2'}] 
} 

私はこのJSONで何がこのようなコードで「要素」で説明した要素でフォームを作成することです。

（私はマンボジャンボ+のjqueryのコードでこの案を持っている）

$('#container').html();//clears the container 
for each element in elements do 
    switch element.type 
      case 'button': 
      $('#container').append('<input type="submit" value="'+element.value + ... etc'); 
      end case 
      case 'image': 
      insert image bla bla bla 
    end switch 
end for each 

私は要素がクリックされますかどうかを検出する場合、またはアクションの別の種類、マウスホバーなどの、その他どのように私はこれを結合しません要素に？ また、要素を破棄せずに要素を更新するにはどうすればよいですか？

EDIT：私は、何か重要なことを暗示私の悪い： 私は、生成されたHTML要素と要素javascriptオブジェクト内のデータをリンクする必要があります。アクションがトリガーされたときに取得するデータフィールド。それがこのすべての大衆だ。

Answer 1

があるため、実際には非常に簡単です。..直接

$input = $('<input type="submit" value="'+element.value + ... etc'); 
$input.on('click', function() { 
    // do something 
} 
$('#container').append($input); 

または内側をクリックしたかの選択をチェックし、親にバインドを置く要素をバインド基本的にはオブジェクトsytanx内の要素のすべての属性をマップしています。そのため、我々は、タグを選択し、jQueryの関数の2番目のパラメータとして、属性オブジェクトを渡すよりも何も、これらの要素を作成することができます。

/* Container reference, counting variable */ 
var container = $("#container"), i = 0; 

/* Clear out the container */ 
container.html(""); 

/* Cycle through each element */ 
while (current = data.elements[i++]) { 
    /* Evaluate the value of the current type */ 
    switch (current.type) { 
    /* Since <input type='button|image'> are so similar, we fall-through */ 
    case "button": 
    case "image" : 
     /* Choose a base element, pass in object of properties, and append */ 
     $("<input>", current).appendTo(container); 
     break; 
    } 
} 

それは登録クリック、または任意の他のタイプに来ますイベントでは、$.onメソッドを使用します。セレクタ（この場合は「input」）を渡すので、これは現在のすべての要素に一致するだけでなく、すべての将来の要素にも一致します。

/* Listen for all clicks on input elements within the container */ 
container.on("click", "input", function(){ 
    /* We have a button, and an image. Alert either the value or src */ 
    alert(this.value || this.src); 
}); 

オンラインデモ：http://jsbin.com/izimut/edit#javascript,html

Answer 2

2つのオプションがあります。要素を作成した後は、次のように要素を作成してバインドすることができます。

var $input = $('<input type="submit" value="'+element.value + ... etc') 
        .focus(...).blur(...).etc.; 

$('#container').append($input); 

またはイベント委譲を使用できます。あなたがこれを行うことができ、あなたの最初のページロードで：

$("#container").on("focus", "input", function(){...}); 

これは後で追加#containerのいずれか、現在または動的にあるすべての入力要素をカバーします。 on docsでイベント委任の詳細を読むことができます。

Answer 3

jsコードが短い場合は、追加機能でjsコードを追加するだけです。 append('<input type="submit" onclick="xxxx" value="'+element.value + ... etc');

jsコードが長い場合は、新しい要素にIDを追加できます。 を追加し、idにイベントを追加します。

$("#idxx").click(function(){alert("Hello");}); 

Answer 4

動的に追加された要素のイベントを検出するには、jQueryの1.7以降および以前のバージョンの.live()ためon()を使用する必要があります。

編集：はい、コメントでJamesが指摘したように、delegate()は常にlive()よりもお勧めします。

Answer 5

いずれの形態を構築

$('#container').on('click', 'input', function() { 
    // do something 
}