jqueryを使って要素を追加する方法

Question

jqueryを使用して動的追加フォームを作成したいと思います。

最後のテキスト入力の最後（3番目のテキスト入力）に注目すると、新しいdivを追加します。

JS & htmlファイル

$(document).ready(function() { 
 
    $("div.content:last span input.pdate").focus(function() { 
 
    var lastDiv = $(".content:last"); 
 
    var newDiv = lastDiv.clone(); 
 
    /* debugger; 
 
    num_of_product = num_of_product +1; 
 
    newDiv.find("#num_of_product").innerText=num_of_product; 
 
    console.log($(newDiv.find("#num_of_product").innerText)); */ 
 
    lastDiv.after(newDiv); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="header"> 
 
    <label for="pname">&nbsp;&nbsp;&nbsp;&nbsp;Product Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</label> 
 
    <label for="pprice">&nbsp;&nbsp;&nbsp;&nbsp;Product Price&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</label> 
 
    <label for="pdate">&nbsp;&nbsp;&nbsp;&nbsp;Product Date</label> 
 
</div> 
 

 

 
<div class="content" style="margin-bottom: 20px;"> 
 
    <span id="num-of-product" style=" position: relative;left: -50px; top: 20px;"></span> 
 
    <span style="margin-left: 10px; position: relative;left: -50px; top: 20px;"> 
 
    <input type="text" style="padding:2px; margin: 0 auto;width: 180px;height: 35px;" class="pname"> 
 
    </span> 
 
    <span style="margin-left: 10px; position: relative;left: -1px; top: 20px;"> 
 
    <input type="text" style="padding:2px;margin: 0 auto; width: 150px;height: 35px;" class="pprice"> 
 
    </span> 
 
    <span style="margin-left: 10px; position: relative;left: 56px; top: 20px;"> 
 
    <input type="text" style=" margin: 0 auto;padding:2px; width: 150px;height: 35px;" class="pdate"> 
 
    </span> 
 
    <br class="clear"> 
 
</div>

出力

ui of html code (image)

第1、第3要素（テキスト入力）に注目するとdivを追加します。私はに焦点を合わせた後、前の行から3番目の要素を追加したいと思います。

これに関するヘルプとヒントがあります。

Answer 1

focusからのイベントバインディングは、呼び出しが行われたときにDOMに存在する要素にのみ適用されていました。この変更により、新しい行が追加されるたびにイベントのバインドが解除され、バインドされます。

function addRow() { 
 
    var lastDiv = $(".content:last"); 
 
    var newDiv = lastDiv.clone(); 
 
    lastDiv.after(newDiv); 
 
    $("div.content span input.pdate").off('focus', addRow); 
 
    $("div.content:last span input.pdate").on('focus', addRow); 
 
} 
 
$(document).ready(function() { 
 
    $("div.content:last span input.pdate").focus(addRow); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="header"> 
 
    <label for="pname">&nbsp;&nbsp;&nbsp;&nbsp;Product Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</label> 
 
    <label for="pprice">&nbsp;&nbsp;&nbsp;&nbsp;Product Price&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</label> 
 
    <label for="pdate">&nbsp;&nbsp;&nbsp;&nbsp;Product Date</label> 
 
</div> 
 

 

 
<div class="content" style="margin-bottom: 20px;"> 
 
    <span id="num-of-product" style=" position: relative;left: -50px; top: 20px;"></span> 
 
    <span style="margin-left: 10px; position: relative;left: -50px; top: 20px;"> 
 
    <input type="text" style="padding:2px; margin: 0 auto;width: 180px;height: 35px;" class="pname"> 
 
    </span> 
 
    <span style="margin-left: 10px; position: relative;left: -1px; top: 20px;"> 
 
    <input type="text" style="padding:2px;margin: 0 auto; width: 150px;height: 35px;" class="pprice"> 
 
    </span> 
 
    <span style="margin-left: 10px; position: relative;left: 56px; top: 20px;"> 
 
    <input type="text" style=" margin: 0 auto;padding:2px; width: 150px;height: 35px;" class="pdate"> 
 
    </span> 
 
    <br class="clear"> 
 
</div>