Question

我有这个代码，每次我写一些内容时都会给我一个额外的输入。但我有一个问题，即使在输入中已经写了一些东西，我改变了它，它增加了一个新的输入。但我想禁用它。

我尝试过if检查，但我不熟悉html，所以我不知道如何执行此检查，就像我想要的那样。

有人可以告诉我如何检查输入框下面是否有正在更改的对象

谢谢

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('#addScnt').live('click', function() {
    $('<tr><td><label for="p_scnts"><input type="text" class="iptArea" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></tr></td>').appendTo(scntDiv);
    i++;
    return false;
  });
  
  $(".iptArea").live("change", function() {
	
    $('<tr><td><label for="p_scnts"><input type="text" class="iptArea" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></tr></td>').appendTo(scntDiv);
    i++;
	
    return false;

  });

  $('#remScnt').live('click', function() {
    if (i > 1) {
      $(this).parents('tr').remove();
      i--;
    }
    return false;
  });
});

<html>
<head>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  <script type="text/javascript" src="./script.js"></script>

</head>

<body>
  <h2><a href="http://fiddle.jshell.net/0hcod561/1/show/light/#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
	<tr>
	<td>
      <label for="p_scnts">
        <input type="text" class="iptArea" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value">
      </label>
	</td>
	</tr>
</div>

  
</body>
</html>

Answer 1

有几个问题：

tr标记之外有table个标记 - 这是无效的HTML; div不是正确的容器;
jQuery 1.4确实过时了，不推荐使用live方法;
for属性具有引用不存在元素的值。可能应该阅读for="p_scnt"而不是for="p_scnts";
前两个事件处理程序中存在重复的代码;
您插入的模板HTML有错误：
- 结束</tr>和</td>代码的顺序错误;
- 输入的id属性与现有元素具有相同的值 - 这在HTML中是不允许的，并且可能导致脚本的意外行为;
- 此处显示与for属性相同的问题;
- 您可以更好地将模板HTML放在HTML文档中一个看不见的容器。这使得管理变得更容易。

要防止在最后一行中已有空输入时添加行，您可以使用此测试：

$('#p_scents .iptArea').last().val() === ''

以下是更正后的代码，其中还包括该测试：

＆＃13;

$(function() {
    var uniqueId = 1;
    
    function addRow() {
        var html = $('#template > tbody').html().replace(/\$/g, uniqueId++);
        $('#p_scents > tbody').append(html.trim());
        return false;
    }

    $('#addScnt').click(addRow);
    
    $(document).delegate('.iptArea', 'change', function () {
        if ($('#p_scents .iptArea').last().val() === '') return false; // don't add
        return addRow();
    });

    $(document).delegate('.remScnt', 'click', function(e) {
        $(this).parents('tr').remove();
        return false;
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
<h2>
   <a href="http://fiddle.jshell.net/0hcod561/1/show/light/#" id="addScnt">
      Add Another Input Box
   </a>
</h2>

<table style="display:none" id="template">
    <tr>
        <td>
            <label for="p_scnt_$">
                <input type="text" class="iptArea" id="p_scnt_$"     
                        size="20" name="p_scnt_$" value="" placeholder="Input Value">
            </label>
            <a href="#" class="remScnt">Remove</a>
       </td>
    </tr>
</table>

<table  id="p_scents">
    <tr>
        <td>
            <label for="p_scnt">
                <input type="text" class="iptArea" id="p_scnt" 
                        size="20" name="p_scnt" value="" placeholder="Input Value">
            </label>
        </td>
    </tr>
</table>

＆＃13;

您还可以考虑回复input事件，在change之后添加该字词，如下所示：

$(document).delegate('.iptArea', 'change input', function () {

这将在每次更改时触发，而不仅仅是在您更改焦点时。

请注意，我已将您的通话转换为.live()至.delegate()，因为在较新版本的jQuery（＆gt; 1.9）中根本不支持.live()，而{{1}在所有1.x版本中工作（仍然）。但请注意the docs on .delegate()：

从jQuery 1.7开始，.delegate()已被.delegate()方法取代。但是，对于早期版本，它仍然是使用事件委派的最有效方法。

但jQuery 1.4中不存在.on()，因此在完全迁移代码之前，on是最佳折衷方案。如the docs on .live()中所述：

不推荐使用
版本：1.7，已删除：1.9

旧版jQuery的用户应优先使用delegate .delegate()。

迁移到当前的jQuery版本

之后

然后更改对.live()次调用的.delegate()次调用，并在这些调用中交换前两个参数，例如：

.on()

这是相同的代码段，但使用jQuery 2.2运行

＆＃13;

    $(document).on('change input', '.iptArea', function () { // .. etc

＆＃13;

$(function() {
    var uniqueId = 1;
    
    function addRow() {
        var html = $('#template > tbody').html().replace(/\$/g, uniqueId++);
        $('#p_scents > tbody').append(html.trim());
        return false;
    }

    $('#addScnt').click(addRow);
    
    $(document).on('change', '.iptArea', function () {
        if ($('#p_scents .iptArea').last().val() === '') return false; // don't add
        return addRow();
    });

    $(document).on('click', '.remScnt', function(e) {
        $(this).parents('tr').remove();
        return false;
    });
});

＆＃13;

Answer 2

如果要检查tr元素所在行之后是否有一行（input）：

var has_row_after = $( 'input' ).closest('tr').next().is('tr');

检查下面是否有

2 个答案:

迁移到当前的jQuery版本