焦点不适用于输入字段Jquery

Question

我正在尝试使用jquery动态添加输入字段。我能够添加输入字段但无法将焦点移动到下一个输入字段。

代码如下： -

＆＃13;

＆＃13;

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $(scntDiv).keypress( function(event) {
    if (event.which==13){
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
      i++;
      return false;
    }

  });

  $('#remScnt').live('click', function() { 
    if( i > 2 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

＆＃13;

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
  <p>
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

您可以为附加的每个新原始图标赋予唯一ID，并且在追加后，您可以使用该ID触发焦点。

Answer 2

1。 id每个元素都必须是唯一的，因此请将id='p_scnt'更改为class='p_scnt'作为输入框。以及使用class="remScnt"而不是id="remScnt"来删除按钮

2. 使用$('.p_scnt:last').focus();将焦点添加到动态创建的输入框

3 正如您在评论中提到的那样，您使用了jQuery最新版本，因此.live()无效，现在您需要使用{{3} }

工作代码段： -

＆＃13;

＆＃13;

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').length;

  $(scntDiv).keypress( function(event) {
    if (event.which==13){
    alert($(event.target).val());
      $('<p><label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
      $('.p_scnt:last').focus();
      i++;
      return false;
    }
  });

  $(document).on('click','.remScnt',function() { 
    if( i > 1 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

＆＃13;

* { 
  font-family:Arial; 
}
h2 { 
  padding:0 0 5px 5px; 
}
h2 a { 
  color: #224f99; 
}
a { 
  color:#999; 
  text-decoration: none; 
}
a:hover { 
  color:#802727; 
}
p { 
  padding:0 0 5px 0; 
}

input { 
  padding:5px; 
  border:1px solid #999; 
  border-radius:4px; 
  -moz-border-radius:4px; 
  -web-kit-border-radius:4px; 
  -khtml-border-radius:4px; 
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

＆＃13;

＆＃13;

＆＃13;

注意： - {/ em> 到alert()值在alert($(event.target).val());条件下if (event.which==13){。{/ p>