1

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

要素がクリックされたかどうか、またはマウスのホバーなどの別の種類のアクションを検出したいのですが、これを要素にバインドするにはどうすればよいですか? また、要素を破壊せずに更新するにはどうすればよいですか?

編集:私は何か重要なことを暗示しました、私の悪い:私は要素のjavascriptオブジェクトのデータを生成されたhtml要素にリンクする必要があります。アクションがトリガーされたときに取得するデータ フィールド。それがすべてのネズミイルカです。

4

5 に答える 5

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を参照してください。

于 2012-05-03T02:51:09.980 に答える
1

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

編集:はい、James がコメントで指摘したように、delegate()常に推奨されlive()ます。

于 2012-05-03T02:51:43.427 に答える
1

フォームの作成は非常に簡単です。基本的に、要素のすべての属性をオブジェクト 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メソッドを使用します。セレクター (この場合は「入力」) を渡しているため、これは現在のすべての要素だけでなく、将来のすべての要素にも一致します。

/* 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

于 2012-05-03T03:26:07.547 に答える
0

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

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

$("#idxx").click(function(){alert("Hello");});
于 2012-05-03T02:51:21.490 に答える
0

要素を直接バインドするか

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

または、内部でクリックされたものの選択をチェックする親にバインドを配置します..

$('#container').on('click', 'input', function() { 
    // do something 
}
于 2012-05-03T02:52:30.853 に答える