如何通过使用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>