作成したカードをクリックしてカード内の入力フィールドを作成するにはどうすればよいですか？

Question

私はJavascrip htmlとcssを初めて使用しています。 私は少し練習したかったのです。そこでボタンを作成しました。私がクリックすると、新しい小さなカードが画面に現れました。それは全くうまくいく。さて、私は、作成したカードをクリックすると、保存ボタンとキャンセルボタンの2つの入力フィールドを開くという機能を実行しようとしています。私は、保存ボタンとキャンセルボタンをどのようにプログラムするのか知っていますが、作成したカードをクリックすることで、作成したカードにそれらを作る方法がわかりません。誰かが私がJでどのようにこれを行うことができるか知っていますか？私は本当にjsでそれをやり遂げることができないのか分かりません。 これは私のコードです：

<button class="plus"> 
    <div class="item"> 
     <p>+</p> 
    </div> 
    <form name="theform"> 
     <input class="input-feld" type="text"><br> 
     <input class="input-feld "type="text"><br> 
     <input type="button" onClick="new Person()" value="Speichern"> 
     <input type="button" onClick="new Person()" value="Abbrechen"> 
    </form> 
</button> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

のJs：

$(document).ready(function() { 
    $("button.plus").on("click", function() { 
     $("div:last").after("<div class=item><p>Title</p></div>"); 
    }); 
}); 

Answer 1

あなたの現在のコードは、ボタンタグ内のフォームのHTMLを持っているので、ボタンのHTML、お使いのカードのhtmlを分離、台無しになります。

以下は実際の例です。

• をクリックしたときにカードが追加されます、別のボタンを持っているが隠してすることができますcloneと新しいカード

• を作成するために、身体に追加カードのプロトタイプを

  アイデアを持っていますカードをクリックしたときにのみ表示される各カードの内側にあるフォーム

• を使用すると、dynamicallでクリックイベントが発生しますカードを追加しました。

$(document).ready(function() { 
 
    $("button.plus").on("click", function() { 
 
     var newCard = $('#cardPrototype').clone(true); // clone the card html 
 
     $(newCard).css('display','block').removeAttr('id'); 
 
     $('#newCardHolder').append(newCard); 
 
    }); 
 
    
 
    $('body').on('click','.card',function(){ // event delegation syntax 
 
     $(this).find('form').show();  
 
    }); 
 
});

.card{ 
 
    background-color:yellow; 
 
    padding:5px; 
 
    width:200px; 
 
    margin-bottom:20px; 
 
    height:150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="plus"> 
 
    <div class="item"> 
 
    <p>+</p> 
 
    </div> 
 
</button> 
 

 
<div id="newCardHolder"> 
 

 

 
</div> 
 

 
<div id="cardPrototype" class="card" style="display:none;"> 
 
    <span> This is a Random Card</span> 
 
    <form name="theform" style="display:none;"> 
 
    <input class="input-feld" type="text"> 
 
    <br> 
 
    <input class="input-feld " type="text"> 
 
    <br> 
 
    <input type="button" onClick="new Person()" value="Speichern"> 
 
    <input type="button" onClick="new Person()" value="Abbrechen"> 
 
    </form> 
 
</div>

これは便利です願っています。