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

Posted 2023-05-09

【中文标题】如何通过使用jquery聚焦来添加元素

【英文标题】：How to add the elements by focusing with jquery

【发布时间】：2018-06-05 06:01:32

【问题描述】：

我想用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；而我想在聚焦后添加上一行的第三个元素。

感谢任何帮助和提示。

【问题讨论】：

$("div.content:last span input.pdate").focus(...) 只执行一次，因此唯一具有焦点处理程序的元素是执行时的“最后一个”div.content 元素。

【参考方案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>

【讨论】：

不要不断添加和删除事件处理程序，而是使用事件委托