0

最後に生成されたテキスト ボックスをクリックすると、新しいテキスト入力ボックスが追加されます。

しかし、最初のテキスト入力ボックスをクリックしたときにのみ、新しいテキスト入力ボックスが生成されます。それで、解決策はありますか？

<script type="text/javascript">
$(function(event){
  $('.add-new').click(function(){
    $('.add-new').removeClass();
    $('form').append("<br><input type='text' name='user[]' class='add-new'/>");      
  });
});

</script>

<div>
  <form method='post' name='login'>
    <input type='text' name='user[]' class='add-new'/>
  </form>
</div>
4

4 に答える 4

5 
$('form').on('click','.add-new', function(){

直接イベント =>デリゲート イベント

ライブデモ

完全なコード:

$('form').on('click', '.add-new', function() {
    $(this).removeClass('add-new');
    $(this).closest('form').append("<br><input type='text' name='user[]' class='add-new'/>");
});​

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任イベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。

onドキュメント

于 2012-06-24T09:02:45.223 に答える
2 
$('form[name=login]').on('click', '.add-new', function() {
    $(this).removeClass(); // $(this) instead of $('.add-new') 
                           // $(this) point to the clicked element
                           // which you want

    $('form').append("<br><input type='text' name='user[]' class='add-new'/>");
});

クラス名add-newを変更し、新しい要素を同じクラスで動的に追加するため、デリゲート イベントが必要です。

についてもっと読む.on()

ノート

.on()デリゲート イベントの構文

$(container).on(eventName, target, handlerFunction)
于 2012-06-24T09:03:02.080 に答える
2

デモ http://jsfiddle.net/JuvwB/8/

Plz 注: イベントが既に$(this)バインドされているので、使用する必要があります。.add-new

上記の残りのすべては素晴らしい解決策です。

これが役に立てば幸いです、乾杯

コード

$(function(event){
  $('.add-new').on('click', function(){
    $(this).removeClass();
    $('form').append("<br><input type='text' name='user[]' class='add-new'/>");      
  });
});​
于 2012-06-24T09:04:32.430 に答える
1

これが機能しない理由は、「クリック」イベントを設定したときにターゲットが存在しないため、「クリック」イベントがバインドされていないためです。

jQuery には、バブリング イベントをキャッチする「on」関数と呼ばれる凝った関数があります。

$(document).on('click','.add-new', function(){

}

すべてのイベント (クリック、マウスオーバーなど) は最も深いノードから始まり、ドキュメントまで html ツリーをバブルアップします。明示的に "stopPropagation" を呼び出すか、bubling クリック ハンドラー関数の途中で処理されたものに false を返さない限り、ドキュメントでそれらをキャッチしても安全です。

$("form").on...またはで木の真ん中で捕まえることもできます$("div").on...

于 2012-06-24T09:05:06.877 に答える