如何通过 jquery 聚焦来添加元素

Question

我想使用 jquery 构建动态添加表单。

我想在最后一个文本输入（第三个文本输入）的末尾添加一个新的div。

js & html files

$(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>

output

ui of html code (image)

当关注第一、第三个元素（文本输入）时，预期 div 将被添加；而我想添加聚焦后上一行的第三个元素。

感谢任何有关此的帮助和提示。

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>

如何通过 jquery 聚焦来添加元素

How to add the elements by focusing with jquery

forms

jquery

add

dynamic

elements