如何通过使用jquery进行聚焦来添加元素

Question

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

我想在焦点在最后一个文本输入的末尾（第三个文本输入）时添加一个新的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)

当关注第一个，第三个元素（文本输入）时，将添加所需的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>