私は、私は完全にはJavaScript/jQueryのでは初心者だjavascript関数AJAX

Question

を使用した後、私のonclickを呼び出すことはできませんし、私は少し問題:)

私は生成し、フォームフィールドを移入する件のデータを取得するために、AJAXを使用していますがあります。その後、私はjavascript関数でフィールドを追加したり削除したりしたいのですが、うまくいきません。

私が学んでいるように、私は自分のコードをステップバイステップで作成するので、次のコードはajaxリクエスト（完全に動作しています）を実装しています。画像。

$(document).ready(function(){ 

var id = $('#subId').val(); 
var num  = $('.cloneSub').length; 
var newNum = new Number(num + 1); 

$.ajax({ 
    type: 'POST', 
    dataType: 'json', 
    url: '/admin/popsub2/', 
    data: 'id='+id, 
    async: false, 
    success: function(data){ 

     $.each(data, function(key, val){ 

      // Add and populate the input text element 
      var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
      newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

      $('#sub' + num).attr('value', val); 

      $('#sub' + num).after(newElem); 
      $(newElem).before('<br />'); 

      // Simply add the select element 
      var newSelect = $('#editMenu_article' + num).clone().attr('id', 'editMenu_article' + newNum); 
      newSelect.children(':first').attr('id', 'editMenu_article' + newNum).attr('name', 'editMenu_article' + newNum); 

      $('#editMenu_article' + num).after(newSelect); 
      $(newSelect).before('<br />'); 
     }); 
    }, 

    failure: function(){ 
     alert('echec !!!'); 
    } 
}); 


function addField(){ 

    // Add the input text element 
    var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
    newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

    $('#sub' + num).attr('value', val); 

    $('#sub' + num).after(newElem); 
    $(newElem).before('<br />'); 

    // Add the select element 
    var newSelect = $('#addMenu_article' + num).clone().attr('id', 'addMenu_article' + newNum); 
    newSelect.children(':first').attr('id', 'addMenu_article' + newNum).attr('name', 'addMenu_article' + newNum); 

    $('#addMenu_article' + num).after(newSelect); 
    $(newSelect).before('<br />'); 

} 

}); 

addField（）関数はまったく機能しません。理由はわかりません。 AJAXはスクリプトの実行を手伝っているようだ。

あなたの助けを頼りにしてください。

UPDATE

マイ+イメージは次のとおりです。

<img src="images/plus.png" id="editSub2" /> 

あなたの助けに続いて、私はこれらのコードを試みた：

$('#editSub2').live('click', function(){ ... }); 

$('#editSub2').bind('click', function(){ ... }); 

をしかし、何も動作します。

Answer 1

addField()は、jQueryドキュメント準備完了コールバックの範囲内に宣言しました。その機能の外の誰もそれについて知ることはできません。グローバル関数として宣言することはできますが、カプセル化するほうが優れています。あなたは有用なリソースであるJavascript Patternsのようなものを見つけるかもしれません。

Answer 2

イメージが動的に作成される場合は、作成後にclickイベントをバインドする必要があります。作成しない場合は、ドキュメント準備ブロックでクリックイベントをバインドする必要があります。あなたはDOMイベントハンドラトラップに遭遇しているよう

$('img#myimg').bind("click", function(){ 

// Add the input text element 
    var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
    newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

    $('#sub' + num).attr('value', val); 

    $('#sub' + num).after(newElem); 
    $(newElem).before('<br />'); 

    // Add the select element 
    var newSelect = $('#addMenu_article' + num).clone().attr('id', 'addMenu_article' + newNum); 
    newSelect.children(':first').attr('id', 'addMenu_article' + newNum).attr('name', 'addMenu_article' + newNum); 

    $('#addMenu_article' + num).after(newSelect); 
    $(newSelect).before('<br />'); 


}); 

Answer 3

が鳴ります。この問題は、イベントsans jQueryを処理したことがあれば、より意味があります。

$(".images").click(myFunc); 

のjQueryが行くと、セレクタに一致するすべての要素を検索し、この（おおよそ）コードを使用して、onclickイベントに機能myFuncを結合することである：あなたがこれを行うとき

基本的に、何が起こる

element.onclick = myFunc; 

（それは実際にはより複雑な何かをするが、ちょうどそれはそれが何をするかthatsの仮定）

、あなたが実行したときにそれが起こります上記のコードだけで、DOMに追加された余分な要素にはそのイベントが追加されていないため、jQueryはそれらを追加することはありませんでした。

しかし、すべてが失われているわけではありません。既存のものと将来のすべての要素にバインドするために、華麗な.live()関数をjQueryで使用できます。新しい要素を手作業で再バインドする必要がなく、エラーが発生しにくいよりも簡単で使いやすいです。イベントの順序付けを妨害するという小さな欠点があります。.bind()のようなインターフェイスを使用する必要があるため、代わりに.live("click", myfunc)を使用してください。

EDIT

あなたの質問の多くを読んだの光で、それは問題はあなたが持っているということであると思われることは、あなたが#editSub2にバインドされていることですが、#editSub<n>を生成しているので、jQueryのは、あなたが程度であるかは考えていません。私はクラスを使って共通の機能を要素に送り、固有の要素のIDを、おそらくより効率的にすることをお勧めします。