jQueryの入力要素を追加し、その私がこの単純なHTMLコードを持っている入力要素

Question

からデータを送信します。

<div id="new_gallery"> 
    <p id="add_gallery">Add new gallery</p> 
</div> 

とjQueryコード：

<script> 
    $("#add_gallery").click(function() { 
     $("#new_gallery").append('<input name"new_gallery" /><a href="#" id="create_new_gallery">Add</a>'); 
     $(this).remove(); 
    }); 

    $("#create_new_gallery").on('click', function(){ 
     alert('1'); 
    }); 
</script> 

まず機能が働いているが、2番目の1ではありません。新しいinput要素を作成し、ajax経由でデータを送信し、次にinput要素を削除し、p要素をもう一度追加する必要があります。これどうやってするの？

Answer 1

2番目のステートメントが実行されるとき、要素#create_new_galleryはまだ存在しないので何もしません。

$("#add_gallery").click(function() { 
    $("#new_gallery").append('<input name="new_gallery" /><a href="#" id="create_new_gallery">Add</a>'); 
    $(this).remove(); 
    $("#create_new_gallery").on('click', function() { 
     alert('1'); 
    }); 
});​ 

DEMOここ

---

は次のとおりです。

あなたはインスタンスの要素を作成した後、クリックイベントへの結合を行うことができますが、これは要素がDOMに存在する保証しますもう少し最適化されたバージョン。これは、要素を追加し、それを再クエリする必要がありますするビットナンセンスだ（idで問い合わせるしかしイベントは最速の方法である以外にも、それはやっぱjQueryのの連鎖機能を使用するのが最善です：。

$("#add_gallery").click(function() { 
    var $gallery = $("#new_gallery"); 

    $('<input name="new_gallery" />').appendTo($gallery); 
    $('<a href="#" id="create_new_gallery">Add</a>') 
     .on('click', function() { 
      alert('1'); 
     }) 
     .appendTo($gallery); 

    $(this).remove(); 
});​ 

DEMO

Answer 2

#create_new_galleryクリックイベントをバインドするときに存在しません。

$("#add_gallery").click(function() { 
    var newG = $("#new_gallery"); 
    $('<input name"new_gallery" />').appendTo(newG); 
    $('<a href="#" id="create_new_gallery">Add</a>').appendTo(newG).on('click', 
    function() { 
     alert('1'); 
    }); 

    $(this).remove(); 
}); 

変数回避に$("#new_gallery")を得ることが二回、それを探すためにあることに注意してください：ここで

は、あなたのコードがどのように見えるかです。

Answer 3

ページが読み込まれた後に追加された要素のために解雇イベントを処理するためにliveを試してみてください。

$("#create_new_gallery").live('click', function(){ 
    alert('1'); 
}); 

http://api.jquery.com/live/

Answer 4

$(document).ready(function() { 
    $("#add_gallery").click(function() { 
     $("#new_gallery").append('<input name"new_gallery" /><a href="#" id="create_new_gallery">Add</a>'); 
     $(this).remove(); 
     $("#create_new_gallery").on('click', function(){ 
      alert('1'); 
     }); 
    }); 
}); 

DEMO：http://jsfiddle.net/39E4s/2/